CODEWITHSUNDEEP
reactjsmaterial-ui
Frederick Mfinanga
Frederick Mfinanga

Reputation: 1155

How do you change the Stepper color on React Material UI?

enter image description here

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?

Upvotes: 23

Views: 58734

Answers (9)

brianlavery
brianlavery

Reputation: 41

I did this via the sx property on the MobileStepper. I specifically wanted to change the colour of the dots indicating progress

<MobileStepper
    variant='dots'
    steps={maxSteps}
    ...
    sx={{
        '.MuiMobileStepper-dot': { backgroundColor: '#CCCCCC' },
        '.MuiMobileStepper-dotActive': { backgroundColor: '#666666' },
    }}
    ...
/>

Upvotes: 1

Ra&#250;l
Ra&#250;l

Reputation: 421

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>

Upvotes: 29

Erik
Erik

Reputation: 51

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"
  },
});

Upvotes: 5

Manrah
Manrah

Reputation: 566

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>

Upvotes: 0

Ally Haire
Ally Haire

Reputation: 2548

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

Upvotes: 7

user6144056
user6144056

Reputation:

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

Upvotes: 13

Chris
Chris

Reputation: 31

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

Upvotes: 1

amwill04
amwill04

Reputation: 1360

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.

Upvotes: 13

Piotr O
Piotr O

Reputation: 429

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

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

Upvotes: 0

Related Questions