MUI 的 Stepper StepIconComponent 道具在从样式对象呈现样式时遇到问题。导致应用崩溃

Question

目前试图弄清楚如何从样式对象中为步进器组件呈现样式（无需执行内联样式）。但是，当我尝试执行类似于 Material UI 演示给我的操作时，它给了我一个错误。我基本上从中获取了一些零碎的东西，并尝试在我的代码中实现它。这是我想要复制的 Material UI 演示的样子。

这是他们的代码

const ColorlibStepIconRoot = styled('div')(({ theme, ownerState }) => ({
  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',
  ...(ownerState.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)',
  }),
  ...(ownerState.completed && {
    backgroundImage:
      'linear-gradient( 136deg, rgb(242,113,33) 0%, rgb(233,64,87) 50%, rgb(138,35,135) 100%)',
  }),
}));

function ColorlibStepIcon(props) {
  const { active, completed, className } = props;

  const icons = {
    1: <SettingsIcon />,
    2: <GroupAddIcon />,
    3: <VideoLabelIcon />,
  };

  return (
    <ColorlibStepIconRoot ownerState={{ completed, active }} className={className}>
      {icons[String(props.icon)]}
    </ColorlibStepIconRoot>
  );
}

我想我可以废弃 HOC 组件（颜色步骤图标根），而无需根。此外，他们正在从

导入样式

import { styled } from '@mui/material/styles';

当我尝试这样做时，它未定义。所以我尝试在样式对象中使用它，就像我一直对withStyles 所做的那样。

但是我收到了这个错误：

这是我的代码：

import React from 'react';
import { Typography } from '@material-ui/core';
import { withStyles } from '@material-ui/core/styles';
import Stepper from '@material-ui/core/Stepper';
import Step from '@material-ui/core/Step';
import StepLabel from '@material-ui/core/StepLabel';
import Icon from '@material-ui/core/Icon';
import PropTypes from 'prop-types';


const styles = theme => ({
  stepLabelRoot: {
    fontWeight: 'bold',
    color: '#fff',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center'
  },
  checklistHeader: {
    fontWeight: 'bold',
    marginTop: '80px',
    color: 'white'
  },
  connectorIcon: {
    color: theme.palette.text.secondary
  },
  active: {
    backgroundColor: 'green'
  },
  stepper: {
    background: 'none',
    fontWeight: 'bold',
    height: '500px'
  },
  checklistImage: {
    width: '42px',
    height: '42px'
  }
});

const steps = ['Are you there?', 'Adopt', 'Buy'];


const Checklist = ({ classes }) => {
  const ColorlibStepIcon = ({
    icon, completed, className, classes, theme
  }) => {
    const icons = {
      1: <img className={classes.checkListImage} src="https://i.pinimg.com/474x/be/54/bd/be54bd5e8e9c23e3ce570ff2acae592d.jpg" alt="check" />,
      2: <img className={classes.checkListImage} src="https://i.pinimg.com/474x/be/54/bd/be54bd5e8e9c23e3ce570ff2acae592d.jpg" alt="check" />,
      3: <img className={classes.checkListImage} src="https://i.pinimg.com/474x/be/54/bd/be54bd5e8e9c23e3ce570ff2acae592d.jpg" />,
    };

    return (
      <div ownerState={{ completed }} className={className}>
        {icons[String(icon)]}
      </div>
    );
  };
  return (
    <React.Fragment>
      <Typography variant="h6" align="center" gutterBottom className={classes.checklistHeader}>Check the following</Typography>
      <Stepper alternativeLabel activeStep={2} className={classes.stepper}>
        {steps.map(label => (
          <Step key={label}>
            <StepLabel classes={{ root: classes.stepLabelRoot }} StepIconComponent={ColorlibStepIcon}>
              <div className={classes.stepLabelRoot}>
                {label}
              </div>
              <span>
                Lorem Ipsum
              </span>
            </StepLabel>
          </Step>
        ))}
      </Stepper>
    </React.Fragment>
  );
};

Checklist.defaultProps = {

};

Checklist.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles, { withTheme: true })(Checklist);

Answer 1

您的代码中有 2 个错误。在您的图标组件中：

<img className={classes.checkListImage}

您在上面定义的规则名称称为checklistImage 而不是checkListImage，因此将其更改为：

<img className={classes.checklistImage}

其次，来自Checklist 组件的classes 被classes 内部的classes 遮蔽：

const ColorlibStepIcon = ({
  icon,
  completed,
  className,
  theme,
  /*classes <-- this classes is undefined which shadows the real classes
   passing from above, so remove it */
}) => {