Im using Material UI's Stepper component to render a checklist like so. This is a pic from their docs.
when I wanted to introduce an error state to the checklist, I found that there is a prop called error for the StepLabel that I can declare. Basically it will allow you to change the styles such as background color, etc.
However, when I set the error prop to true, there is a new icon that came about. I do not want this icon, but just want to change the fill color from blue to red.

Is there any way I can forgo that icon and just worry about the fill color of the stepper instead?
Here is my code:
<Stepper alternativeLabel activeStep={this.determineFormStep()} connector={<StepConnector />} className={classes.stepper}>
{formLabels.map((label, index) => {
return (
<Step key={label}>
<StepLabel
icon={label.step}
error={true}
StepIconProps={{
classes: {
root: classes.step,
completed: classes.completed,
active: classes.active,
error: classes.error,
disabled: classes.disabled
}
}}>
<span className={classes.sublabel}>
{label.sublabel3}
</span>
</div>
</StepLabel>
</Step>);
})}
</Stepper>
Put condition on icon props on StepLabel.
icon={error ? <Error /> : label.step}
like as mention below 👇
Stepper alternativeLabel activeStep={this.determineFormStep()} connector={<StepConnector />} className={classes.stepper}>
{formLabels.map((label, index) => {
return (
<Step key={label}>
<StepLabel
icon={error ? <Error /> : label.step}
error={true}
StepIconProps={{
classes: {
root: classes.step,
completed: classes.completed,
active: classes.active,
error: classes.error,
disabled: classes.disabled
}
}}>
<div className={classes.stepLabelRoot}>
<Typography className={classes.label}>
{label.label}
</Typography>
<span className={classes.sublabel}>
{label.sublabel1}
</span>
<span className={classes.sublabel}>
{label.sublabel2}
</span>
<span className={classes.sublabel}>
{label.sublabel3}
</span>
</div>
</StepLabel>
</Step>);
})}
</Stepper>