更改 Material UI 错误步骤的步进器图标

Question

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

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

但是，当我将 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>

更改 Material UI 错误步骤的步进器图标

Change Material UI Stepper icon for error step

javascript

css

reactjs

material-ui

font-awesome