如何禁用Material UI Stepper错误状态默认图标仅修改填充色

解决方案 #

MUI的StepLabel组件设置error={true}时默认会将你传入的自定义图标替换为内置错误警告图标，这是组件的默认交互逻辑，要实现仅修改填充色、保留原有步骤图标的需求，可使用以下两种方案：

方案1：保留error属性，强制禁用默认图标替换

在现有StepLabel配置中新增StepIconComponent属性，强制沿用你传入的自定义图标，仅通过类名控制填充色即可。
修改后的代码如下：

<Stepper alternativeLabel activeStep={this.determineFormStep()} connector={<StepConnector />} className={classes.stepper}>
  {formLabels.map((label, index) => {
    return (
      <Step key={label}>
        <StepLabel
          icon={label.step}
          error={true}
          StepIconComponent={(props) => <StepIcon {...props} icon={label.step} />}
          StepIconProps={{
            classes: {
              root: classes.step,
              completed: classes.completed,
              active: classes.active,
              error: classes.error,
              disabled: classes.disabled
            }
          }}>
            <span className={classes.sublabel}>
              {label.sublabel3}
            </span>
        </StepLabel>
      </Step>);
  })}
</Stepper>

再在你的样式表中配置error类的填充色即可：

.error {
  background-color: #f44336 !important;
  color: #fff;
}

方案2：不使用内置error属性，自主控制类名

如果你不需要StepLabel自带的错误状态相关的默认样式（比如标签文字变红），可以直接移除error={true}配置，自主判断错误状态动态添加error类，完全绕开默认错误图标替换逻辑：

<StepLabel
  icon={label.step}
  StepIconProps={{
    classes: {
      root: classes.step,
      completed: classes.completed,
      active: classes.active,
      // 自定义判断错误状态的逻辑，有错误时添加error类
      ...(isStepError(index) ? { error: classes.error } : {}),
      disabled: classes.disabled
    }
  }}>
  {/* 其他内容 */}
</StepLabel>

内容的提问来源于stack exchange，提问作者Kenny Quach