如何拆分Material-UI LinearProgress实现多步进度条效果？

Material-UI 的 LinearProgress 组件本身没有直接支持「拆分多步」的配置参数，需要通过自定义样式或封装组件来实现需求。以下是两种可行方案：

方案一：自定义CSS实现带分隔线的进度条 #

通过CSS背景渐变给进度条添加步骤分隔线，配合原生进度条的进度值控制填充范围：

1. 定义CSS样式：

.progressBar {
  --steps: 5; /* 默认步骤数，可通过组件动态覆盖 */
  background-image: repeating-linear-gradient(
    to right,
    transparent,
    transparent calc((100% / var(--steps)) - 2px),
    #e0e0e0 calc((100% / var(--steps)) - 2px),
    #e0e0e0 calc(100% / var(--steps))
  );
}

.progressBar-bar {
  border-radius: 4px;
}

2. 在组件中动态传入步骤数：

<LinearProgress
  variant="determinate"
  classes={{ root: "progressBar", bar: "progressBar-bar" }}
  value={(100 / stepsNumber) * stepNumber}
  style={{ "--steps": stepsNumber }}
/>

方案二：封装多步进度条组件 #

直接用容器包裹多个独立的进度块，通过当前步骤控制每个块的激活状态：

import { Box } from '@mui/material';

const StepProgressBar = ({ stepsNumber, stepNumber }) => {
  return (
    <Box sx={{ display: 'flex', gap: 1, width: '100%' }}>
      {Array.from({ length: stepsNumber }).map((_, index) => (
        <Box
          key={index}
          sx={{
            flex: 1,
            height: 8,
            borderRadius: 4,
            backgroundColor: index < stepNumber ? '#1976d2' : '#e0e0e0',
            transition: 'background-color 0.3s ease'
          }}
        />
      ))}
    </Box>
  );
};

// 使用示例
<StepProgressBar stepsNumber={5} stepNumber={2} />

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