如何在material-ui@next的React应用中动态使用自定义PNG步进器图标

我之前在Material UI v5（也就是你说的material-ui@next版本）开发时也碰到过类似的需求，要动态切换步进器的PNG图标确实得花点心思，不过有几个很实用的方案可以解决，给你详细说说：

这是最灵活的方式，直接写一个自己的图标组件，完全控制不同状态下的PNG显示：

首先创建自定义组件，它能接收步进器的状态（激活/完成）和图片路径：

import { StepIconProps } from '@mui/material/StepIcon';

// 扩展默认的StepIconProps，加入自定义的icon路径属性
const CustomStepIcon = ({ active, completed, icon: iconPath }: StepIconProps & { icon: string }) => {
  // 这里可以根据状态动态切换图片，也可以直接使用传入的基础路径+状态后缀
  let currentIcon = iconPath;
  if (completed) {
    // 比如完成状态用带"completed"后缀的图片
    currentIcon = iconPath.replace('.png', '-completed.png');
  } else if (active) {
    currentIcon = iconPath.replace('.png', '-active.png');
  }

  return (
    <img 
      src={currentIcon} 
      alt={`Step indicator`} 
      style={{ 
        width: '24px', 
        height: '24px',
        // 可以根据状态加视觉反馈
        transform: active ? 'scale(1.2)' : 'scale(1)',
        opacity: completed ? 1 : 0.7,
        transition: 'all 0.2s ease'
      }}
    />
  );
};

然后在你的步进器里使用这个组件：

import { useState } from 'react';
import { Stepper, Step, StepLabel } from '@mui/material';

// 可以把步骤信息存在状态里，方便后续动态更新
const [steps, setSteps] = useState([
  { label: '信息填写', icon: '/images/step1-default.png' },
  { label: '确认订单', icon: '/images/step2-default.png' },
  { label: '完成支付', icon: '/images/step3-default.png' },
]);
const [activeStep, setActiveStep] = useState(0);

// 比如后续可以通过接口更新步骤的图标路径
const updateStepIcon = (stepIndex, newIconPath) => {
  setSteps(prev => prev.map((step, idx) => 
    idx === stepIndex ? {...step, icon: newIconPath} : step
  ));
};

export default function DynamicIconStepper() {
  return (
    <Stepper activeStep={activeStep}>
      {steps.map((step, index) => (
        <Step key={step.label}>
          <StepLabel 
            icon={
              <CustomStepIcon 
                active={index === activeStep}
                completed={index < activeStep}
                icon={step.icon}
              />
            }
          >
            {step.label}
          </StepLabel>
        </Step>
      ))}
    </Stepper>
  );
}

如果不想写完整的自定义组件，也可以直接用Material UI的sx属性，把默认的SVG图标替换成PNG背景图：

import { useState } from 'react';
import { Stepper, Step, StepLabel, StepIcon } from '@mui/material';

const steps = ['信息填写', '确认订单', '完成支付'];
const [activeStep, setActiveStep] = useState(0);

// 定义不同状态下的图片路径
const getStepIconPath = (index) => {
  if (index < activeStep) return '/images/step-completed.png';
  if (index === activeStep) return '/images/step-active.png';
  return '/images/step-default.png';
};

export default function StyledIconStepper() {
  return (
    <Stepper activeStep={activeStep}>
      {steps.map((label, index) => (
        <Step key={label}>
          <StepLabel
            icon={
              <StepIcon
                sx={{
                  // 隐藏默认的SVG图标
                  '& svg': { display: 'none' },
                  // 设置背景图为对应的PNG
                  backgroundImage: `url(${getStepIconPath(index)})`,
                  backgroundSize: 'contain',
                  backgroundRepeat: 'no-repeat',
                  backgroundPosition: 'center',
                  width: '28px',
                  height: '28px',
                  // 给激活/完成状态加过渡效果
                  transition: 'transform 0.2s ease',
                  '&.Mui-active': {
                    transform: 'scale(1.1)',
                  },
                  '&.Mui-completed': {
                    opacity: 1,
                  }
                }}
              />
            }
          >
            {label}
          </StepLabel>
        </Step>
      ))}
    </Stepper>
  );
}

几个注意点： #

• 确保PNG图片的路径正确：如果是用Create React App，图片放在public文件夹下可以直接用绝对路径；如果是导入的方式，可以用import stepIcon from './images/step-default.png'然后把src设为stepIcon。
• 动态更新图标：不管是用方案1还是方案2，只要更新状态里的图片路径或者activeStep，组件都会自动重新渲染，切换对应的图标。
• 适配不同尺寸：可以根据需求调整图片的width和height，或者用objectFit属性保证图片比例。

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