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

You can set the classes property for the StepIconProps property:

    
    Some Text
    

Then your style should overwrite the default theme color by using the !important CSS rule:

const styles = theme => ({
  icon: {
    color: "red !important"
  },
});