在Material UI Stepper中仅设置圆形尺寸的正确方法是什么？

不需要完整重写自定义StepIcon组件，通过覆盖默认样式即可同时解决圆形对齐、文本适配的问题，具体操作如下：

• 放弃单独使用transform缩放、单独修改StepIconProps的font-size的方案，这两种方式存在布局计算的固有缺陷
• 同步覆盖三类和布局相关的样式，保证所有元素的占位和视觉表现一致：
  • StepIcon根容器的宽高，保证圆形不被拉伸
  • 内部文本/图标的font-size，让文字适配调整后的圆形尺寸
  • StepIcon的垂直外边距，保证缩放后圆心和Stepper连接线的中心完全对齐

具体实现代码 #

如果使用MUI v5的sx属性，可直接给Step组件加样式覆盖：

<Stepper>
  <Step
    sx={{
      // 命中MUI默认的StepIcon根类名
      '& .MuiStepIcon-root': {
        width: 24, // 按需调整尺寸，默认值为32
        height: 24, // 保持和宽度相等，避免圆形变形
        fontSize: 16, // 同步调整内部文本大小，默认值为1.25rem
        // 同步调整垂直边距，对齐连接线中心
        marginTop: 4,
        marginBottom: 4,
      }
    }}
  >
    <StepLabel>你的步骤文本</StepLabel>
  </Step>
</Stepper>

如果使用MUI v4的makeStyles，对应写法是在样式对象中给.MuiStepIcon-root类添加上述相同的属性即可。

方案说明 #

• 完全保留MUI默认StepIcon的所有外观：选中态颜色、未选中态边框、完成态对勾图标样式都不会改动，仅调整尺寸
• 之前两种方案的问题根源：
  • transform缩放不会改变元素在布局流中的实际占位大小，仅改变视觉渲染效果，因此内部文本的布局位置还是按默认尺寸计算，不会和缩放后的圆形同步
  • 单独修改font-size不会改变外层圆形容器的默认32px占位，同时默认的垂直边距还是适配32px尺寸的，因此圆形位置和连接线错位
• 边距数值可根据实际调整的尺寸微调，只要保证StepIcon上下边距相等，即可实现圆心和连接线的精准对齐

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