Material UI Stepper组件StepLabel自定义图标报styled未定义错误如何解决

当前报错的直接原因是styled工具未导入，同时代码还存在其他依赖缺失、命名冲突、版本适配的问题，按以下步骤修改即可解决：

1. 补全缺失的导入 #

你目前用的是Material UI v4版本（从@material-ui/core的导入路径、withStyles用法可以判断），首先补充所有缺失的导入语句：

// 删除导入中多余的styles，补充styled、用到的组件和PropTypes
import React from 'react';
import PropTypes from 'prop-types';
import { Typography, Stepper, Step, StepLabel, Icon } from '@material-ui/core';
import { withStyles, styled } from '@material-ui/core/styles';

如果是Material UI v5版本，调整导入路径为@mui前缀即可：

import { styled } from '@mui/material/styles';
import { Typography, Stepper, Step, StepLabel, Icon } from '@mui/material';

2. 修正组件命名冲突 #

你自定义的组件命名为Stepper，和MUI自带的Stepper组件重名，会导致递归调用报错，修改自定义组件的名称：

// 把组件名从Stepper改成CustomStepper避免冲突
const CustomStepper = ({ classes }) => {
  // 内部原有逻辑保持不变
};

// 导出语句同步修改
export default withStyles(styles, { withTheme: true })(CustomStepper);

3. 适配v4版本的styled用法（可选） #

如果是v4版本的styled不支持ownerState参数，直接把状态透传即可：

// 修改ColorlibStepIconRoot的定义，直接接收active、completed参数
const ColorlibStepIconRoot = styled('div')(({ theme, active, completed }) => ({
  backgroundColor: theme.palette.mode === 'dark' ? theme.palette.grey[700] : '#ccc',
  zIndex: 1,
  color: '#fff',
  width: 50,
  height: 50,
  display: 'flex',
  borderRadius: '50%',
  justifyContent: 'center',
  alignItems: 'center',
  ...(active && {
    backgroundImage: 'linear-gradient( 136deg, rgb(242,113,33) 0%, rgb(233,64,87) 50%, rgb(138,35,135) 100%)',
    boxShadow: '0 4px 10px 0 rgba(0,0,0,.25)',
  }),
  ...(completed && {
    backgroundImage: 'linear-gradient( 136deg, rgb(242,113,33) 0%, rgb(233,64,87) 50%, rgb(138,35,135) 100%)',
  }),
}));

// 对应修改组件传参
const ColorlibStepIcon = ({ icon, active, completed, className }) => {
  const icons = {
    1: <Icon style={{ color: 'red' }}>create_outline</Icon>,
    2: <Icon style={{ color: 'red' }}>star</Icon>,
    3: <Icon style={{ color: 'red' }}>people</Icon>,
  };
  return (
    <ColorlibStepIconRoot active={active} completed={completed} className={className}>
      {icons[String(icon)]}
    </ColorlibStepIconRoot>
  );
};

修改完成后即可解决styled未定义的报错，自定义步骤图标也能正常渲染。

内容的提问来源于stack exchange，提问作者Kenny Quach