如何覆盖Material UI StepLabel默认样式以移除步骤节点圆圈内的数字

你之前的样式配置不生效的核心原因是：圆圈内的数字是StepLabel内部嵌套的StepIcon组件渲染的，你将MuiStepIcon相关样式写在StepLabel的样式规则中不会生效，且labelContainer样式控制的是步骤说明文本（Order Placed这类文字）的容器，和圆圈内的数字无关。

最简单的实现方式是通过StepLabel的StepIconProps属性，给内部StepIcon传递样式隐藏数字文本，修改代码如下：

1. 首先在你的useStyles中新增隐藏图标文本的样式类：

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    // 原有样式保留，新增以下类
    hideStepIconText: {
      display: 'none'
    }
  })
);

2. 渲染StepLabel时传入StepIconProps指定样式：

<Stepper alternativeLabel activeStep={activeStep} connector={<QontoConnector />}>
  {steps.map((label) => (
    <Step key={label}>
      {/* 新增StepIconProps配置 */}
      <StepLabel 
        StepIconProps={{
          classes: {
            text: classes.hideStepIconText
          }
        }}
      >
        {label}
      </StepLabel>
    </Step>
  ))}
</Stepper>

3. 你之前自定义的CustomStepLabel不需要使用，直接删除即可，配置后圆圈内的数字就会完全隐藏，不会影响下方的步骤说明文字。

如果需要自定义圆圈内的图标（比如替换为圆点、对勾等），可以直接给StepLabel传入icon属性指定自定义的图标组件即可。

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