How do you change the Stepper color on React Mater

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: {
    ...
  }
})

Answer 2

You can set the classes property for the StepIconProps property:

<Step key="someKey">
    <StepLabel StepIconProps={{
        classes: {
            active: classes.icon
        }
    }}>
    Some Text
    </StepLabel>
</Step>

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

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

Answer 3

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.

<Stepper activeStep={activeStep}> {steps.map((label, index) => { return ( <Step> <StepLabel icon={index+1} /> </Step> ); })} </Stepper>

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 <StepLabel /> when a condition is met and then style it with CSS.

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

Answer 4

This is a way I used to override it using classes overrides - all other properties remain the same.

const styles = theme => ({
  labelContainer: {
    "& $alternativeLabel": {
      marginTop: 0
    }
  },
  step: {
    "& $completed": {
      color: "lightgreen"
    },
    "& $active": {
      color: "pink"
    },
    "& $disabled": {
      color: "red"
    }
  },
  alternativeLabel: {},
  active: {}, //needed so that the &$active tag works
  completed: {},
  disabled: {},
  labelContainer: {
    "& $alternativeLabel": {
      marginTop: 0
    }
  },
});

class myStepper extends Component {

 render() {
   const { classes } = this.props;
   return(
        <Stepper
          activeStep={activeStep}
          alternativeLabel
          connector={connector}
          classes={{
            root: classes.root
          }}
        >
          {this.state.numberTasks.map(label => {
            return (
              <Step
                key={label}
                classes={{
                  root: classes.step,
                  completed: classes.completed,
                  active: classes.active
                }}
         >
        <StepLabel
          classes={{
            alternativeLabel: classes.alternativeLabel,
            labelContainer: classes.labelContainer
          }}
          StepIconProps={{
            classes: {
              root: classes.step,
              completed: classes.completed,
              active: classes.active,
              disabled: classes.disabled
            }
          }}
        >
          {this.state.labels[label - 1]} //label value here
        </StepLabel>
              </Step>
            );
          })}
        </Stepper>
);
}

export default withStyles(styles)(myStepper);

Answer 5

You need to change props icon of a StepLabel component as below:

<StepLabel
 icon={<WarningIcon color={red500} />}
 style={{color: red500}}
>
  Random label
</StepLabel>

Answer 6

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
    }
})

<MuiThemeProvider muiTheme={muiTheme}>
    <Stepper>
        ...
    </Stepper>
</MuiThemeProvider>

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.