score:0

We need to pass the class to StepperLabel props . For example if we need to change alternativeLabel class then try the below:-


  <StepLabel
  StepIconComponent={stepperIcon} 
  classes={{
         alternativeLabel: classes.alternativeLabel,
          }}
   >
    <span className={cn(classes.label, labelClass)}>
       {'label'}
    </span>
  </StepLabel>

score:1

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

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

score: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.

<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

score:3

You can set the classes property for the StepIconProps property:

part of JavaScript styles

...
icon:{
  fill:"green",
},
text:{
  fill:"white",
},
...

<Step key="someKey">
    <StepLabel StepIconProps={{
        classes: {
            active: classes.icon,
            text:   classes.text,
        }
    }}>
    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"
  },
});

score:3

In case anyone is still looking for this question, for MUI 5 it is through the sx property or styled.

Checkout what are the classes of step, stepIcon so you can customize the styles.

<Box sx={{ width: '100%' }}>
  <Stepper activeStep={currentStep} alternativeLabel>
    {Object.keys(steps).map((stepNumber) => (
      <Step
        key={stepNumber}
        sx={{
          '& .MuiStepLabel-root .Mui-completed': {
            color: 'secondary.dark', // circle color (COMPLETED)
          },
          '& .MuiStepLabel-label.Mui-completed.MuiStepLabel-alternativeLabel':
            {
              color: 'grey.500', // Just text label (COMPLETED)
            },
          '& .MuiStepLabel-root .Mui-active': {
            color: 'secondary.main', // circle color (ACTIVE)
          },
          '& .MuiStepLabel-label.Mui-active.MuiStepLabel-alternativeLabel':
            {
              color: 'common.white', // Just text label (ACTIVE)
            },
          '& .MuiStepLabel-root .Mui-active .MuiStepIcon-text': {
            fill: 'black', // circle's number (ACTIVE)
          },
        }}>
        <StepLabel>{steps[stepNumber].label}</StepLabel>
      </Step>
    ))}
  </Stepper>
</Box>

score:7

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

score:12

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.

score:13

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

Related Query

More Query from same tag