如何修改Material UI Stepper中完成步骤的勾选图标的颜色？

你可以通过以下几种方法修改完成步骤的勾选图标颜色，无需自定义图标：

方法一：自定义全局主题（推荐全局统一修改） #

通过MUI的主题定制功能，直接覆盖MuiStepIcon的完成态样式，所有Stepper组件都会生效：

import { createTheme, ThemeProvider } from '@mui/material/styles';
import Stepper from '@mui/material/Stepper';
import Step from '@mui/material/Step';
import StepLabel from '@mui/material/StepLabel';

// 创建自定义主题
const customTheme = createTheme({
  components: {
    MuiStepIcon: {
      styleOverrides: {
        completed: {
          color: '#2ecc71', // 替换为你需要的颜色值
        },
      },
    },
  },
});

export default function CustomStepper() {
  const activeStep = 1; // 示例激活步骤
  const steps = ['第一步', '第二步', '第三步'];

  return (
    <ThemeProvider theme={customTheme}>
      <Stepper activeStep={activeStep}>
        {steps.map((label, index) => (
          <Step key={label}>
            <StepLabel>{label}</StepLabel>
          </Step>
        ))}
      </Stepper>
    </ThemeProvider>
  );
}

方法二：局部组件修改（仅当前Stepper生效） #

通过StepLabel的StepIconComponent属性，给单个Stepper的完成图标设置样式：

import Stepper from '@mui/material/Stepper';
import Step from '@mui/material/Step';
import StepLabel from '@mui/material/StepLabel';
import StepIcon from '@mui/material/StepIcon';

export default function LocalStepper() {
  const activeStep = 1;
  const steps = ['第一步', '第二步', '第三步'];

  return (
    <Stepper activeStep={activeStep}>
      {steps.map((label, index) => (
        <Step key={label}>
          <StepLabel
            StepIconComponent={(props) => (
              <StepIcon
                {...props}
                sx={{
                  '&.MuiStepIcon-completed': {
                    color: '#e74c3c', // 替换为目标颜色
                  },
                }}
              />
            )}
          >
            {label}
          </StepLabel>
        </Step>
      ))}
    </Stepper>
  );
}

方法三：全局CSS覆盖 #

如果项目使用全局样式文件，可以直接针对MUI的类名设置样式：

/* 在全局CSS文件中添加 */
.MuiStepIcon-completed {
  color: #f39c12 !important; /* 替换为你需要的颜色 */
}

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