材质 UI 步进器组件错误状态显示不需要的图标

Posted 2023-03-21

【中文标题】材质 UI 步进器组件错误状态显示不需要的图标

【英文标题】：Material UI's Stepper Component's error state showing unwanted icon

【发布时间】：2022-01-03 05:18:42

【问题描述】：

我正在使用 Material UI 的 Stepper 组件并尝试将处于错误状态的步进器填充为红色。

作为参考，这里是 Material UI 文档中的 Stepper 组件。

所以我试图显示错误状态。 Material UI 有一个错误道具，会显示错误状态，但是，我不希望提供图标。

我只是希望它像任何其他步进器一样，只是带有红色背景。

有什么办法可以去掉那个图标，只显示红色填充？

一直在搜索，但似乎没有人真正问过这个问题。

这是我的代码：

<Stepper alternativeLabel activeStep=this.determineFormStep() connector=<StepConnector /> className=classes.stepper>
          formLabels.map((label) => 
            return (
              <Step key=label>
                <StepLabel
                  error
                  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>

【参考方案1】：

The docs for StepLabel 表明它可以采用可选的icon 属性，这是一个覆盖步骤图标的节点。

例如，如果你想完全隐藏图标，你可以传递一个 Fragment 元素作为图标：

<StepLabel
    error
    icon=<></>
>
    ...
</StepLabel>

或者您可以更改StepIconComponent 或StepIconProps。

这是一个仅关闭图标上的错误状态的示例：

<StepLabel
    error
    StepIconProps= error: false 
>
    ...
</StepLabel>