更改错误步骤的 Material UI Stepper 图标

Question

我正在使用 Material UI 的 Stepper 组件来呈现这样的清单。这是他们文档中的图片。

当我想在清单中引入错误状态时，我发现 StepLabel 有一个名为 error 的 prop 可以声明。基本上它可以让你改变背景颜色等样式。

但是，当我将 error 属性设置为 true 时，会出现一个新图标。我不想要这个图标，而只想将填充颜色从蓝色更改为红色。

有什么方法可以让我放弃那个图标而只担心步进器的填充颜色？

这是我的代码：

<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
                    }
                  }}>
                    <span className={classes.sublabel}>
                      {label.sublabel3}
                    </span>
                  </div>
                </StepLabel>
              </Step>);
          })}
        </Stepper>

Answer 1

对 StepLabel 上的图标道具设置条件。

icon={error ? <Error /> : label.step} 就像下面提到的?

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>