如果步驟中有錯誤，如何更改 Material UI 步進器背景顏色

Question

我正在使用 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>

Answer 1

只需使用 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>
}