Material UI Stepper：如何将步骤图标与标签左对齐

要解决图标左对齐且连接线匹配的问题，需要调整Stepper、Step、StepLabel及StepConnector的样式，以下是修正后的代码及说明：

核心修改点 #

• 让Stepper内部的步骤容器整体左对齐
• 修正Step的布局，确保图标与标签容器左排列
• 调整StepConnector的位置，使其与图标垂直居中对齐
• 优化StepLabel的图标容器样式，避免间距问题

完整样式代码 #

import { styled } from '@mui/material/styles';
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';

export const StyledStepper = styled(Stepper)(({ theme }) => ({
  // 让Stepper内部步骤容器左对齐，覆盖默认的居中/分散布局
  justifyContent: 'flex-start',
  // 移除默认左内边距，避免额外偏移
  paddingLeft: 0,
  [`&.${stepConnectorClasses.active}`]: {
    [`& .${stepConnectorClasses.line}`]: {
      borderColor: '#ff0000',
    },
  },
}));

export const StyledStepperIconRoot = styled('div')<{
  ownerState: { active?: boolean };
}>(({ theme, ownerState }) => ({
  color: theme.palette.mode === 'dark' ? theme.palette.grey[700] : '#eaeaf0',
  display: 'flex',
  height: 22,
  alignItems: 'center',
  ...(ownerState.active && {
    color: '#784af4',
  }),
  '& .customStepIcon-completedIcon': {
    color: '#3DA683',
    zIndex: 1,
  },
}));

export const StyledStepLabel = styled(StepLabel)({
  // 确保标签文本左对齐
  '& .MuiStepLabel-label': {
    textAlign: 'left',
  },
  // 图标容器左对齐，保留自定义间距
  '& .MuiStepLabel-iconContainer': {
    justifyContent: 'flex-start',
    marginRight: '8px',
  },
});

export const StyledStep = styled(Step)({
  // Step根容器设置左对齐，占满整行宽度
  '&.MuiStep-root': {
    justifyContent: 'flex-start',
    width: '100%',
  },
  // 调整步骤内容容器的对齐方式
  '& .MuiStep-content': {
    alignItems: 'flex-start',
  },
});

export const StyledStepperConnector = styled(StepConnector)(({ theme }) => ({
  // 调整连接线位置，与图标垂直中心对齐（11px为图标高度22px的一半）
  [`&.${stepConnectorClasses.root}`]: {
    left: 'calc(-50% + 11px)',
  },
  [`&.${stepConnectorClasses.active}`]: {
    [`& .${stepConnectorClasses.line}`]: {
      borderColor: '#3DA683',
    },
  },
}));

关键说明 #

1. StyledStepper：通过justifyContent: 'flex-start'让所有步骤整体左对齐，移除默认左内边距避免不必要的偏移。
2. StyledStep：直接针对.MuiStep-root设置左对齐，并强制占满整行宽度，确保每个步骤的图标和标签都靠左排列。
3. StyledStepperConnector：利用calc(-50% + 11px)调整连接线的水平位置，使其与图标垂直中心对齐，解决错位问题。
4. StyledStepLabel：保留标签左对齐设置，同时确保图标容器靠左排列，维持自定义间距。

替换原有Stepper相关组件为上述样式组件后，即可实现图标与标签左对齐且连接线匹配的效果。

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