I am trying to customize the disabled Step color on Material UI Steppers

The default color is Blue (Enabled) + Grey (Disabled). But I am looking to change this to something like so:

But I don't seem to able to find any hook into the Icon section of the StepLabel. I already tried applying the CSS to the IconContainer, but the specificity is not sufficient.

My code is available here:

TIA!

I am trying to customize the disabled Step color on Material UI Steppers

The default color is Blue (Enabled) + Grey (Disabled). But I am looking to change this to something like so:

But I don't seem to able to find any hook into the Icon section of the StepLabel. I already tried applying the CSS to the IconContainer, but the specificity is not sufficient.

My code is available here: https://codesandbox.io/s/0102v4z1op

TIA!

• javascript
• css
• reactjs
• material-ui

3 Answers 3

<Stepper
      activeStep={activeStep}
      orientation="vertical"
      connector={false}
    >
      {steps.map((label, index) => {
        return (
          <Step key={label} className={classes.step} classes={{ pleted: classes.pleted }}>
            <StepButton icon={<DeleteIcon className={classes.xiconRoot}/>} pleted={index === 2}>
              <StepLabel
                classes={{
                  iconContainer: classes.iconContainer
                }}
              >
                {label}
              </StepLabel>
            </StepButton>
          </Step>
        );
      })}
</Stepper>

Similary to pleted in classes applied to Step You can apply the following to override different states. https://material-ui./api/step/#css-api

Complete example snippet https://codesandbox.io/s/vn8m2rqol3

I did it like this:

        <StepLabel
          classes={{
            alternativeLabel: classes.alternativeLabel,
            labelContainer: classes.labelContainer
          }}
          StepIconProps={{
            classes: {
              root: classes.step,
              pleted: classes.pleted,
              active: classes.active,
              disabled: classes.disabled
            }
          }}
        >
          {this.state.labels[label - 1]}
        </StepLabel>

And then in the classes I've defined them as follows:

  step: {
    "&$pleted": {
      color: "lightgreen"
    },
    "&$active": {
      color: "pink"
    },
    "&$disabled: {
      color: "red"
    },
  },
  alternativeLabel: {},
  active: {}, //needed so that the &$active tag works
  pleted: {},
  disabled: {},
  labelContainer: {
    "&$alternativeLabel": {
      marginTop: 0
    },
  },

You can make a custom Icon for the Stepper like this.

import { Step, StepLabel, Stepper } from "@mui/material";
import { Check } from "@mui/icons-material";

const CustomIcon = ({ active, pleted, icon, }) => {
  const contents = pleted ? <Check fontSize="inherit" /> : icon;
  return (
    <div style={{
        backgroundColor: active || pleted ? "blue" : "gray",
        color: "white",
        minHeight: "35px",
        minWidth: "35px",
        borderRadius: "50%",
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        padding: "5px",
        fontSize: "1rem",
      }}>
      {contents}
    </div>
  );
};

// Notice the StepIconComponent below.  
// It is passed the props as shown above.

export const MyStepper = ({steps, currentStep}) => {
  return (
    <Stepper activeStep={currentStep}>
      {steps.map((step) => (
        <Step key={step.name}>
          <StepLabel StepIconComponent={CustomIcon}>
            {step.name}
          </StepLabel>
        </Step>
      ))}
    </Stepper>
  );
};