I am utilizing Material UI's Stepper component to display a checklist in this manner. The image below is from their documentation.
https://i.sstatic.net/KfUos.png
While attempting to add an error state to the checklist, I discovered a prop called error for the StepLabel that allows me to specify it. This prop enables the customization of styles such as background color, etc.
However, upon setting the error prop to true, a new icon appeared. I do not wish to have this icon but instead just want to change the fill color from blue to red. https://i.sstatic.net/IzGat.png
Is there a way to avoid displaying that icon and only focus on changing the fill color of the stepper?
Here is the code snippet:
<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>