Skip to content

Changing stepper steps colors Material Design React

Problem

When using the Material UI stepper component, even when reading their documentation is not that clear how to change the color and background of the steps showing the label and the number of step we are currently on

Solution

To change the color of the steps we are going to use the sx attribute on the steps component, and we are going to change the color of the multiple states a step can have

sx={{
    "& .MuiStepLabel-root .Mui-completed": {
        color: "red"
    },
    "& .MuiStepLabel-label.Mui-completed.MuiStepLabel-alternativeLabel": {
        color: "blue"
    },
    "& .MuiStepLabel-root .Mui-active": {
        color: "black"
    },
    "& .MuiStepLabel-label.Mui-active.MuiStepLabel-alternativeLabel": {
        color: "#38a832"
    },
    "& .MuiStepLabel-root .Mui-active .MuiStepIcon-text": {
        fill: "#0e64ab"
    }
}}

Implementation

This code shows a basic implementation of a reusable stepper component, you can find a CodeSandbox with the implementation on the following link https://codesandbox.io/s/changing-stepper-color-c5wvrg?file=/src/Demo.tsx:0-1254

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";

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

export default function StepperComponent() {
    return (
        <Box sx={{ width: "100%" }}>
            <Stepper activeStep={1} alternativeLabel>
                {steps.map((label) => (
                    <Step
                        key={label}
                        sx={{
                            "& .MuiStepLabel-root .Mui-completed": {
                                color: "red"
                            },
                            "& .MuiStepLabel-label.Mui-completed.MuiStepLabel-alternativeLabel": {
                                color: "blue"
                            },
                            "& .MuiStepLabel-root .Mui-active": {
                                color: "black"
                            },
                            "& .MuiStepLabel-label.Mui-active.MuiStepLabel-alternativeLabel": {
                                color: "#38a832"
                            },
                            "& .MuiStepLabel-root .Mui-active .MuiStepIcon-text": {
                                fill: "#0e64ab"
                            }
                        }}
                    >
                        <StepLabel>{label}</StepLabel>
                    </Step>
                ))}
            </Stepper>
        </Box>
    );
}