How to change Material UI stepper background color if there is an error in a step

Question

I am using Material UI's stepper component and trying to set the background color of the stepper if there is an error. However, not sure how to do so. I was able to set the background color for steps that have been completed and that was done in here:

step: {
    '&$completed': {
      color: 'lightgreen'
    },
    '&$active': {
      color: '#979797'
    },
    '&$error': {
      color: 'red'
    },
    '&$disabled': {
      color: 'red'
    },
  },

And in the stepper component:

           <Step key={label}>
                <StepLabel
                  StepIconProps={{
                    classes: {
                      root: classes.step,
                      completed: classes.completed,
                      active: classes.active,
                      error: classes.error,
                      disabled: classes.disabled
                    }
                  }}>
                  <div className={classes.stepLabelRoot}>
                    <Typography className={classes.label}>
                      {label.label}
                    </Typography>
                    <span className={classes.sublabel}>
                      {label.sublabel1}
                    </span>
                    <span className={classes.sublabel}>
                      {label.sublabel2}
                    </span>
                    <span className={classes.sublabel}>
                      {label.sublabel3}
                    </span>
                  </div>
                </StepLabel>
              </Step>);
          })}
        </Stepper>

Answer 1

Just use the css override the lib provides

const useStyles = makeStyles(theme => ({ error: { ... } }))

const MyComponent = props => {
    const [isError, setIsError] = useState(false);
    const classes = useStyles()

    // just apply a conditional class to the root to make the background
    // any color you want
    return <Stepper classes={{ root: isError ? classes.error : '' }}>
        ...
    </ Stepper>
}