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

Old question but in case anyone is looking.

You need to edit the theme and wrap it in getMuiTheme

import getMuiTheme from 'material-ui/styles/getMuiTheme'

const muiTheme = getMuiTheme({
    stepper: {
        iconColor: 'green' // or logic to change color
    }
})


    
        ...
    

See https://github.com/callemall/material-ui/blob/master/src/styles/getMuiTheme.js for full list of components and their default color schmemes.

You will see you can override colors on a per component basis and/or change the overall theme colors.