Material UI Override Step Icon Style

user_3077968 0
Viewed 12288

Using "@material-ui/core" at version 3.1.0

It's pretty easy to override globally a stepper icon's color globally

createMuiTheme({
   overrides: {
     MuiStepIcon: {
       root: {
         color: "#F00"
       },
     }
   }
})

However, it's not clear how you would override the only the color for an icon for either a StepButton or StepLabel using the recommended methods. I see that you can pass in your own icon element, but I don't want to replicate the library logic for the step number and the checkmark.

Is there an clean way to do this?

material-ui
3 Answers

StepLabel provides a StepIconProps property that allows you pass custom props to the StepIcon component. (docs)

You can use the classes prop to customize StepIcon styles. 

<Step key={label}>
  <StepLabel 
    StepIconProps={{ 
      classes: { root: classes.icon } 
    }}
  >
    {label} 
  </StepLabel>
</Step>

Edit Material UI - override step icon color

Non-linear steppers

You can nest a StepLabel component inside StepButton when you need to pass custom props to StepIcon. (docs)

<Step key={label}>
  <StepButton
    onClick={this.handleStep(index)}
    completed={this.state.completed[index]}
  >
    <StepLabel
      StepIconProps={{ classes: { root: classes.icon } }}
    >
      {label}
    </StepLabel>
  </StepButton>
</Step>

Edit Material UI - StepButton override icon color

user_28176870

I was also facing the same problem, So I Raised the issue in Mui repo, received this reply- we are not using the Mui-active and Mui-completed class in v4, In v5 you should use the Mui-active and Mui-completed classes.

So according to them this will fix the issue for now- Declare style like this -

stepIconRoot: {
    color: "pink",
    "&.MuiStepIcon-active": {
      color: "red"
    },
    "&.MuiStepIcon-completed": {
      color: "green"
    }
  }

and put this inside <Step> </Step>

<StepLabel
    StepIconProps={{
        classes: {root: classes.stepIconRoot}
        }}>
     {label}
</StepLabel>

https://codesandbox.io/s/material-ui-override-step-icon-color-forked-rcpqw?file=/demo.js:3095-3456

user_148958170

To apply these changes as global you can use the following

createMuiTheme({
overrides: {
    MuiStepIcon: {
        root: {
            color: "#F00",

            "&$active": {
                color: "#C4E90C"
            },

            "&$completed": {
            color: "#C4E90C"
            }
        },
    }
}

})

user_80437100
Related