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

Posted 2023-02-21

【中文标题】更改错误步骤的 Material UI Stepper 图标

【英文标题】：Change Material UI Stepper icon for error step

【发布时间】：2022-01-02 11:35:06

【问题描述】：

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

【参考方案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的一部分吗？还是别的什么？

@KennyQuach <Error /> 是材质ui图标组件。您可以从@material-ui/icons 导入此图标，用于mui v4 和@mui/icons-material，用于mui v5。