繁体   English   中英

如果步骤中有错误,如何更改 Material UI 步进器背景颜色

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM