MUI Stepper如何添加中间步骤并覆盖样式实现自定义设计

问题对应解决方向 #

• 样式自定义覆盖：放弃全局覆写MUI类名的方案，直接使用MUI官方提供的styled工具、sx属性针对Stepper的核心子组件做定向样式定义，不存在样式优先级不足、覆盖失效的问题，可以1:1匹配自定义设计稿的样式要求。
• 中间步骤添加：MUI Stepper本身不限制步骤节点数量，你只需要在维护的步骤配置数组中按顺序插入对应步骤项，同步调整步骤激活态判断、步骤对应内容的渲染逻辑即可，不需要修改组件底层逻辑。

核心实现代码 #

1. 步骤配置（支持任意插入中间步骤） #

直接在steps数组的对应位置插入你需要的中间步骤即可，数组顺序和页面渲染的步骤顺序完全一致：

// 原步骤数组直接插入新的中间项即可
const steps = [
  "选择 campaign 类型",
  "设置投放规则", // 新增的中间步骤直接插入对应位置
  "上传创意素材", // 新增的中间步骤直接插入对应位置
  "确认信息并提交"
];

2. 自定义Stepper样式组件 #

针对连接线、步骤图标/步骤块、文字标签分别做样式定义，可直接调整参数匹配目标设计：

import Stepper from "@mui/material/Stepper";
import Step from "@mui/material/Step";
import StepLabel from "@mui/material/StepLabel";
import StepConnector, { stepConnectorClasses } from "@mui/material/StepConnector";
import { styled } from "@mui/material/styles";

// 自定义步骤连接线
const CustomStepConnector = styled(StepConnector)(({ theme }) => ({
  [`&.${stepConnectorClasses.alternativeLabel}`]: {
    top: 22,
  },
  [`& .${stepConnectorClasses.line}`]: {
    height: 3,
    border: 0,
    backgroundColor: "#e5e7eb",
    borderRadius: 2,
  },
  [`&.${stepConnectorClasses.completed} .${stepConnectorClasses.line}`]: {
    backgroundColor: "#2563eb",
  },
}));

// 自定义步骤节点（图标/块）
const CustomStepIconWrap = styled("div")(({ theme, ownerState }) => ({
  width: 44,
  height: 44,
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  borderRadius: 8, // 要做圆形节点就改成50%，方形圆角直接调整数值
  backgroundColor:
    ownerState.active || ownerState.completed ? "#2563eb" : "#e5e7eb",
  color: "#fff",
  fontSize: 16,
  fontWeight: 500,
}));

const CustomStepIcon = (props) => {
  const { active, completed, className, icon } = props;
  return (
    <CustomStepIconWrap ownerState={{ active, completed }} className={className}>
      {completed ? "✓" : icon}
    </CustomStepIconWrap>
  );
};

3. 页面中引入使用 #

export default function CampaignStepper({ activeStep }) {
  return (
    <Stepper
      alternativeLabel
      activeStep={activeStep}
      connector={<CustomStepConnector />}
      sx={{ padding: "24px 0" }}
    >
      {steps.map((label) => (
        <Step key={label}>
          <StepLabel
            StepIconComponent={CustomStepIcon}
            sx={{
              "& .MuiStepLabel-label": {
                marginTop: 1,
                fontSize: 14,
                color: "#6b7280",
                "&.Mui-active, &.Mui-completed": {
                  color: "#2563eb",
                  fontWeight: 500,
                },
              },
            }}
          >
            {label}
          </StepLabel>
        </Step>
      ))}
    </Stepper>
  );
}

适配注意事项 #

• 所有样式都通过MUI官方的样式注入方式实现，优先级高于组件默认样式，不需要加!important强覆盖；你可以直接修改颜色值、圆角、尺寸参数匹配你的目标设计。
• 插入中间步骤后，记得同步调整原有的步骤切换逻辑、每个步骤对应的内容区块渲染判断，插入位置之后的步骤对应的activeStep判断值顺次加1即可，不需要改动其他逻辑。

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