[英]How to change Material UI stepper background color if there is an error in a step
我正在使用 Material UI 的步进器组件,如果出现错误,我会尝试设置步进器的背景颜色。 但是,不知道该怎么做。 我能够为已完成的步骤设置背景颜色,并在此处完成:
step: {
'&$completed': {
color: 'lightgreen'
},
'&$active': {
color: '#979797'
},
'&$error': {
color: 'red'
},
'&$disabled': {
color: 'red'
},
},
在步进器组件中:
<Step key={label}>
<StepLabel
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>
只需使用 css 覆盖 lib 提供的
const useStyles = makeStyles(theme => ({ error: { ... } }))
const MyComponent = props => {
const [isError, setIsError] = useState(false);
const classes = useStyles()
// just apply a conditional class to the root to make the background
// any color you want
return <Stepper classes={{ root: isError ? classes.error : '' }}>
...
</ Stepper>
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.