How do you change the Stepper color on React Material UI?

Question

In the screenshot above, I am trying to change the step color to either: green for correct, yellow for in-progress and red for incorrect.

How could I do this?

Answer 1

We need to pass the class to StepperLabel props . For example if we need to change alternativeLabel class then try the below:-

  <StepLabel
  StepIconComponent={stepperIcon} 
  classes={{
         alternativeLabel: classes.alternativeLabel,
          }}
   >
    <span className={cn(classes.label, labelClass)}>
       {'label'}
    </span>
  </StepLabel>