React MUI Step API

Material-UI is a UI library providing predefined robust and customizable components for React for easier web development. The MUI design is based on top of Material Design by Google. 

In this article, we will discuss the React MUI Step API. The Steppers are used to convey numbers in some steps. The Step is one of the multiple steps from the Stepper which provides the content and other features.  The API provides a lot of functionality and we will learn to implement them.

Import Step API

import Step from '@mui/material/Step';
// or
import { Step } from '@mui/material';

Props List: Here is the list of props used with this component. We can access them and modify them according to our needs.

• children (node): It  should be Step sub-components such as StepLabel, and StepContent.
• classes (object): This overrides the existing styles or adds new styles to the component.
• sx (Array<func/object/bool> func/object): The system prop allows defining system overrides as well as additional CSS styles. 
• completed (bool): If set to true, the step is marked as completed. The default value is false.
• disabled (bool): If set to true, the step is displayed as disabled. The default value is false.
• expanded (bool): If set to true, the step is expanded. The default value is false.
• index (integer): It is the position of the step.
• last (bool): If set to true, the step is rendered at the last. The default value is false.

CSS Rules:

• root (.MuiStep-root): It is the style applied to the root element.
• horizontal (.MuiStep-horizontal): It is the style applied to the root element if orientation is set to horizontal.
• vertical (.MuiStep-vertical): It is the style applied to the root element if orientation is set to vertical.
• alternativeLabel (.MuiStep-alternativeLabel): It is the style applied to the root element if alternativeLabel is set to true.
• completed (.Mui-completed): It is the state class applied to the root element if completed is set to true.

Syntax: Create a Step inside Stepper as follows:

<Stepper activeStep={activeStep}>
      <Step>
        <StepLabel>HTML</StepLabel>
      </Step>
</Stepper>

Installing and Creating React app, and adding the MUI dependencies:

Step 1: Create a react project using the following command.

npx create-react-app gfg_tutorial

Step 2: Get into the project directory

cd gfg_tutorial

Step 3: Install the MUI dependencies as follows:

npm install @mui/material @emotion/react @emotion/styled @mui/lab @mui/icons-material

Step 4: Run the project as follows:

npm start

Example 1: In the following example, we have multiple Steps in the Stepper.

App.js

Javascript

import "./App.css";
import * as React from "react";
import Box from "@mui/material/Box";
import Stepper from "@mui/material/Stepper";
import Step from "@mui/material/Step";
import StepLabel from "@mui/material/StepLabel";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";

const steps = [
    "Select campaign settings",
    "Create an ad group",
    "Create an ad",
];

function App() {
    const [activeStep, setActiveStep] = React.useState(0);
    const handleNext = () => {
        setActiveStep((prevActiveStep) => prevActiveStep + 1);
    };

    const handleBack = () => {
        setActiveStep((prevActiveStep) => prevActiveStep - 1);
    };

    const handleReset = () => {
        setActiveStep(0);
    };

    return (
        <div className="App">
            <div
                className="head"
                style={{
                    width: "fit-content",
                    margin: "auto",
                }}
            >
                <h1
                    style={{
                        color: "green",
                    }}
                >
                    GeeksforGeeks
                </h1>
                <strong>React MUI Step API</strong>
            </div>
            <br />
            <Box sx={{ width: "80%", margin: "auto" }}>
                <Stepper activeStep={activeStep}>
                    <Step>
                        <StepLabel>HTML</StepLabel>
                    </Step>
                    <Step>
                        <StepLabel>CSS</StepLabel>
                    </Step>
                    <Step>
                        <StepLabel>Javascript</StepLabel>
                    </Step>
                </Stepper>
                {activeStep === steps.length ? (
                    <React.Fragment>
                        <Typography sx={{ mt: 2, mb: 1 }}>
                            All steps completed
                        </Typography>

                        <Box sx={{
                            display: "flex",
                            flexDirection: "row",
                            pt: 2
                        }}>
                            <Box sx={{ flex: "1 1 auto" }} />
                            <Button onClick={handleReset}>
                                Reset
                            </Button>
                        </Box>
                    </React.Fragment>
                ) : (
                    <React.Fragment>
                        <Typography sx={{ mt: 2, mb: 1 }}>
                            Step {activeStep + 1}
                        </Typography>

                        <Box sx={{
                            display: "flex",
                            flexDirection: "row",
                            pt: 2
                        }}>
                            <Button
                                color="inherit"
                                disabled={activeStep === 0}
                                onClick={handleBack}
                                sx={{ mr: 1 }}
                            >
                                Back
                            </Button>
                            <Box sx={{ flex: "1 1 auto" }} />

                            <Button onClick={handleNext}>
                                {activeStep === steps.length - 1 ?
                                    "Finish" : "Next"}
                            </Button>
                        </Box>
                    </React.Fragment>
                )}
            </Box>
        </div>
    );
}

export default App;

Output:

Example 2: In the following example, we have customized the background using the sx field.

App.js

Javascript

import "./App.css";
import * as React from "react";
import Box from "@mui/material/Box";
import Stepper from "@mui/material/Stepper";
import Step from "@mui/material/Step";
import StepLabel from "@mui/material/StepLabel";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";

const steps = [
    "Select campaign settings",
    "Create an ad group",
    "Create an ad",
];

function App() {
    const [activeStep, setActiveStep] = React.useState(0);
    const handleNext = () => {
        setActiveStep((prevActiveStep) => prevActiveStep + 1);
    };

    const handleBack = () => {
        setActiveStep((prevActiveStep) => prevActiveStep - 1);
    };

    const handleReset = () => {
        setActiveStep(0);
    };

    return (
        <div className="App">
            <div
                className="head"
                style={{
                    width: "fit-content",
                    margin: "auto",
                }}
            >
                <h1
                    style={{
                        color: "green",
                    }}
                >
                    GeeksforGeeks
                </h1>
                <strong>React MUI Step API</strong>
            </div>
            <br />
            <Box sx={{ width: "80%", margin: "auto" }}>
                <Stepper activeStep={activeStep}>
                    <Step sx={{ backgroundColor: "lightgreen" }}>
                        <StepLabel>HTML</StepLabel>
                    </Step>
                    <Step sx={{ backgroundColor: "lightcoral" }}>
                        <StepLabel>CSS</StepLabel>
                    </Step>
                    <Step sx={{ backgroundColor: "lightgoldenrodyellow" }}>
                        <StepLabel>Javascript</StepLabel>
                    </Step>
                </Stepper>
                {activeStep === steps.length ? (
                    <React.Fragment>
                        <Typography sx={{ mt: 2, mb: 1 }}>
                            All steps completed
                        </Typography>

                        <Box sx={{
                            display: "flex",
                            flexDirection: "row",
                            pt: 2
                        }}>
                            <Box sx={{ flex: "1 1 auto" }} />
                            <Button onClick={handleReset}>Reset</Button>
                        </Box>
                    </React.Fragment>
                ) : (
                    <React.Fragment>
                        <Typography sx={{ mt: 2, mb: 1 }}>
                            Step {activeStep + 1}
                        </Typography>

                        <Box sx={{
                            display: "flex",
                            flexDirection: "row",
                            pt: 2
                        }}>
                            <Button
                                color="inherit"
                                disabled={activeStep === 0}
                                onClick={handleBack}
                                sx={{ mr: 1 }}
                            >
                                Back
                            </Button>
                            <Box sx={{ flex: "1 1 auto" }} />

                            <Button onClick={handleNext}>
                                {activeStep === steps.length - 1 ?
                                    "Finish" : "Next"}
                            </Button>
                        </Box>
                    </React.Fragment>
                )}
            </Box>
        </div>
    );
}

export default App;

Output:

Reference: https://mui.com/material-ui/api/step/