如何在步骤出现错误时修改Material UI Stepper组件的背景色

你可以通过给步骤配置加错误状态标记，再配合MUI组件的样式覆盖属性实现需求，具体实现方法如下：

实现步骤 #

• 第一步：给步骤配置新增error状态字段，标记是否出错
  示例配置：

  const steps = [
    { label: "填写基础信息", completed: true, error: false },
    { label: "提交资质证明", completed: false, error: true },
    { label: "审核完成", completed: false, error: false },
  ];
  

• 第二步：在Step组件上通过sx属性做样式判断，保留原有已完成步骤的背景色逻辑，新增错误状态的背景色配置即可
  示例代码：

  import { Stepper, Step, StepLabel } from "@mui/material";
  
  function CustomStepper({ activeStep }) {
    return (
      <Stepper activeStep={activeStep}>
        {steps.map((step, index) => (
          <Step
            key={step.label}
            sx={{
              // 优先级：出错状态 > 已完成状态 > 默认状态
              bgcolor: step.error
                ? "error.light" // 可替换为自定义颜色值，如#ffebee
                : step.completed
                ? "success.light"
                : "background.paper",
              borderRadius: "4px",
              padding: "8px 16px",
              marginBottom: "8px",
            }}
          >
            <StepLabel error={step.error}>
              {step.label}
            </StepLabel>
            {/* 原有StepContent等业务逻辑保持不变 */}
          </Step>
        ))}
      </Stepper>
    );
  }
  

可选扩展 #

如果仅需要修改步骤图标的背景色而非整个步骤条的背景，可自定义StepIcon组件的样式：

<StepLabel
  StepIconComponent={({ active, completed, error }) => (
    <StepIcon
      active={active}
      completed={completed}
      error={error}
      sx={{
        bgcolor: error
          ? "error.main"
          : completed
          ? "success.main"
          : "grey.300",
        color: "#fff",
      }}
    />
  )}
>
  {step.label}
</StepLabel>

内容的提问来源于stack exchange，提问作者UI Developer