Material UI Override Step Icon Style

Question

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?

Answer 1

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>

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>