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

Update: Here is correct way for latest version 3. You just need to add the overrides correctly to your theme by referencing MuiStepIcon:

const theme = createMuiTheme({
  overrides: {
   MuiStepIcon: {
    root: {
      '&$completed': {
        color: 'pink',
      },
      '&$active': {
        color: 'red',
      },
    },
    active: {},
    completed: {},
  },
  palette: {
    ...
  }
})