I am currently using the Stepper component from Material UI and attempting to make the fill of a stepper that is in its error state appear red.
If you need to see the Stepper component from Material UI's documentation, you can access it https://i.sstatic.net/kKmvH.png.
My goal is to display an error state without showing the provided icon that comes with the error prop in Material UI.
You can check out the image for reference here: https://i.sstatic.net/MuACo.png.
All I want is for it to resemble any other stepper, but with a red background.
Is there a way to remove the icon and just display a solid red fill?
I've looked everywhere, but it seems like nobody has really asked about this before.
Here is the code snippet:
<Stepper alternativeLabel activeStep={this.determineFormStep()} connector={<StepConnector />} className={classes.stepper}>
{formLabels.map((label) => {
return (
<Step key={label}>
<StepLabel
error
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>