Material UI Stepper组件错误状态如何移除默认图标仅显示红色填充

有两种可直接落地的实现方式：

方案1：自定义StepIcon组件（推荐，兼容性更强） #

完全自定义步骤图标渲染逻辑，绕过MUI默认的错误图标规则，样式可控性更高。

1. 先定义自定义图标组件：

const CustomStepIcon = ({ active, completed, error, icon }) => {
  // 可根据自己的需求调整各状态颜色
  const getBgColor = () => {
    if (error) return '#f44336';
    if (completed) return '#4caf50';
    if (active) return '#1976d2';
    return '#e0e0e0';
  };

  return (
    <div
      style={{
        width: 24,
        height: 24,
        borderRadius: '50%',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        color: '#fff',
        backgroundColor: getBgColor(),
        fontSize: '0.75rem'
      }}
    >
      {/* 已完成状态显示对勾，其余状态显示步骤序号，和默认逻辑保持一致 */}
      {completed ? '✓' : icon}
    </div>
  );
};

2. 修改原有StepLabel配置，增加StepIconComponent属性指定自定义组件：

<StepLabel
  error
  StepIconComponent={CustomStepIcon} // 新增这一行
  StepIconProps={{
    classes: {
      root: classes.step,
      completed: classes.completed,
      active: classes.active,
      error: classes.error,
      disabled: classes.disabled
    }
  }}
>
  {/* 原有子内容保持不变 */}
</StepLabel>

方案2：CSS样式覆盖（无需修改组件结构，适合快速调整） #

直接通过CSS隐藏默认错误图标，强制显示步骤序号，仅修改你已定义的classes.error样式即可：

// 你的样式定义中修改error类的配置（以makeStyles为例）
const useStyles = makeStyles({
  // 其他类保持不变
  error: {
    backgroundColor: '#f44336 !important',
    color: '#fff !important',
    // 强制显示步骤序号文本
    '& .MuiStepIcon-text': {
      display: 'block !important',
    },
    // 隐藏默认的错误叹号图标
    '& svg path': {
      display: 'none !important',
    },
  }
})

两种方案都可以实现错误状态下和普通步骤样式一致、仅背景变红的需求，推荐优先用自定义组件的方案，后续需要调整其他样式也更灵活。

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