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
}
}}>
<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>
Put condition on icon props on StepLabel.
icon={error? <Error />: label.step}
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.