如何将MUI Stepper连接器改为进度条？含步骤内容样式问题

下面给你几个可行的方案，核心思路是通过MUI的样式覆盖能力，分别控制连接器的进度效果和步骤内容区的样式：

方案1：使用styled API自定义连接器与内容区 #

通过MUI的styled工具分别封装自定义的连接器和步骤内容组件，完全独立控制两者样式：

import { Stepper, Step, StepLabel, StepConnector, styled } from '@mui/material';
import { useState } from 'react';

// 自定义进度连接器：用伪元素实现进度填充
const ProgressConnector = styled(StepConnector)(({ theme, completed }) => ({
  '&.MuiStepConnector-line': {
    borderColor: theme.palette.grey[300],
    borderWidth: 2,
    position: 'relative',
    // 根据步骤完成状态设置进度宽度
    '&::after': {
      content: '""',
      position: 'absolute',
      top: 0,
      left: 0,
      height: '100%',
      width: completed ? '100%' : '0%',
      backgroundColor: theme.palette.primary.main,
      transition: 'width 0.3s ease-in-out',
    },
  },
}));

// 自定义步骤内容区：独立设置样式
const StepContent = styled('div')(({ theme }) => ({
  margin: '16px 0',
  padding: '12px 16px',
  borderRadius: 8,
  border: `1px solid ${theme.palette.divider}`,
  backgroundColor: theme.palette.background.paper,
}));

// 使用示例
export default function CustomStepper() {
  const [activeStep, setActiveStep] = useState(1);
  const steps = ['步骤1', '步骤2', '步骤3'];

  return (
    <Stepper activeStep={activeStep}>
      {steps.map((label, index) => (
        <Step key={label}>
          <StepLabel>{label}</StepLabel>
          {/* 传入completed属性控制连接器进度 */}
          <ProgressConnector completed={index < activeStep} />
          <StepContent>
            {index === 0 && <p>第一步的具体内容，比如表单、说明文本</p>}
            {index === 1 && <p>第二步的内容，可根据步骤状态动态渲染</p>}
            {index === 2 && <p>第三步的完成内容</p>}
          </StepContent>
        </Step>
      ))}
    </Stepper>
  );
}

方案2：直接用sx属性快速覆盖样式 #

如果不想额外封装组件，直接在Stepper和内容区使用sx属性，灵活控制样式：

import { Stepper, Step, StepLabel, StepConnector } from '@mui/material';
import { useState } from 'react';

export default function QuickStyleStepper() {
  const [activeStep, setActiveStep] = useState(1);
  const steps = ['步骤1', '步骤2', '步骤3'];

  return (
    <Stepper activeStep={activeStep}>
      {steps.map((label, index) => {
        const isCompleted = index < activeStep;
        return (
          <Step key={label}>
            <StepLabel>{label}</StepLabel>
            <StepConnector
              sx={{
                '& .MuiStepConnector-line': {
                  borderColor: '#e0e0e0',
                  borderWidth: 2,
                  position: 'relative',
                  '&::after': {
                    content: '""',
                    position: 'absolute',
                    top: 0,
                    left: 0,
                    height: '100%',
                    width: isCompleted ? '100%' : '0%',
                    bgcolor: 'primary.main',
                    transition: 'width 0.3s ease',
                  },
                },
              }}
            />
            {/* 步骤内容区独立样式 */}
            <div
              sx={{
                my: 2,
                p: 2,
                borderRadius: 1,
                border: 1,
                borderColor: isCompleted ? 'primary.light' : 'divider',
                bgcolor: isCompleted ? 'primary.50' : 'background.paper',
              }}
            >
              {/* 内容 */}
            </div>
          </Step>
        );
      })}
    </Stepper>
  );
}

方案3：垂直Stepper适配 #

如果是垂直布局的Stepper，只需要调整连接器伪元素的方向，把宽度改成高度即可：

const VerticalProgressConnector = styled(StepConnector)(({ theme, completed }) => ({
  '&.MuiStepConnector-line': {
    borderLeftWidth: 2,
    borderLeftColor: theme.palette.grey[300],
    position: 'relative',
    '&::after': {
      content: '""',
      position: 'absolute',
      top: 0,
      left: 0,
      width: '100%',
      height: completed ? '100%' : '0%',
      backgroundColor: theme.palette.primary.main,
      transition: 'height 0.3s ease-in-out',
    },
  },
}));

关键说明 #

• 连接器的进度效果通过伪元素+步骤完成状态实现，完全不影响步骤内容区的DOM结构
• 步骤内容区可以通过styled或者sx独立设置样式，和连接器的样式逻辑完全分离
• 利用MUI的全局类名（如MuiStepConnector-line）精准定位连接器元素，无需修改原有DOM结构

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