如何将Material UI Stepper中的数字步骤替换为a、b、c等字母

预期效果参考 #

实现思路 #

MUI Stepper支持自定义步骤图标组件，无需依赖getSteps函数，只需要将默认的数字图标替换为转成字母的自定义图标即可，核心逻辑是将1开始的步骤序号转成对应大写字母，转换规则为String.fromCharCode(64 + 步骤序号)，ASCII码65对应大写字母A，以此类推。

完整实现代码 #

MUI v5 版本 #

import React from 'react';
import Step from '@mui/material/Step';
import StepLabel from '@mui/material/StepLabel';
import Stepper from '@mui/material/Stepper';
import { StepIconProps } from '@mui/material/StepIcon';

// 自定义步骤图标组件
const CustomLetterStepIcon = (props: StepIconProps) => {
  // 已完成状态显示对勾，未完成显示对应字母，不需要对勾可删除判断逻辑
  const displayContent = props.completed 
    ? '✓' 
    : String.fromCharCode(64 + Number(props.icon));

  return (
    <div
      sx={{
        width: 24,
        height: 24,
        borderRadius: '50%',
        bgcolor: props.active || props.completed ? 'primary.main' : 'grey.300',
        color: 'common.white',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        fontSize: 14,
      }}
    >
      {displayContent}
    </div>
  );
};

// 业务组件使用
const stepLabels = ['提交申请', '审核中', '完成'];
export default function LetterStepper() {
  const [currentStep, setCurrentStep] = React.useState(0);

  return (
    <Stepper activeStep={currentStep}>
      {stepLabels.map((label) => (
        <Step key={label}>
          <StepLabel StepIconComponent={CustomLetterStepIcon}>
            {label}
          </StepLabel>
        </Step>
      ))}
    </Stepper>
  );
}

MUI v4 版本 #

仅引入路径和样式写法有差异，核心逻辑一致：

import React from 'react';
import Step from '@material-ui/core/Step';
import StepLabel from '@material-ui/core/StepLabel';
import Stepper from '@material-ui/core/Stepper';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  stepIcon: {
    width: 24,
    height: 24,
    borderRadius: '50%',
    color: '#fff',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    fontSize: 14,
  },
});

const CustomLetterStepIcon = (props) => {
  const classes = useStyles();
  const bgColor = props.active || props.completed ? '#3f51b5' : '#e0e0e0';
  const displayContent = props.completed 
    ? '✓' 
    : String.fromCharCode(64 + Number(props.icon));

  return (
    <div className={classes.stepIcon} style={{ backgroundColor: bgColor }}>
      {displayContent}
    </div>
  );
};

// 业务组件使用方式和v5完全一致

样式调整说明 #

可根据设计需求自行修改自定义图标组件的宽高、颜色、圆角、字体大小等属性，不需要修改其他逻辑。

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