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

Wish I could comment the answer by "@Piotr O", in regards to keeping the step numbers but do not have enough rep yet.

You need to set the icon prop to the index of the Step to keep the numbers.

{steps.map((label, index) => { return ( ); })}

If you were to use different icons like you mentioned, you'd need some conditional logic to swap the icon via the icon prop or another possibility is to add the className prop to when a condition is met and then style it with CSS.

I included an example with both concepts here: https://codesandbox.io/s/l5m570jq0l