How to customize colors in Material UI Stepper Step?
<Stepper
activeStep={activeStep}
orientation="vertical"
connector={false}
>
{steps.map((label, index) => {
return (
<Step key={label} className={classes.step} classes={{ completed: classes.completed }}>
<StepButton icon={<DeleteIcon className={classes.xiconRoot}/>} completed={index === 2}>
<StepLabel
classes={{
iconContainer: classes.iconContainer
}}
>
{label}
</StepLabel>
</StepButton>
</Step>
);
})}
</Stepper>
Similary to completed
in classes
applied to Step
You can apply the following to override different states. https://material-ui.com/api/step/#css-api
Complete example snippet https://codesandbox.io/s/vn8m2rqol3
I did it like this:
<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]}
</StepLabel>
And then in the classes I've defined them as follows:
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
},
},