Material UI 的 Stepper StepLabel 图标问题未定义答案

【问题标题】：Material UI's Stepper StepLabel Icon issue with undefinedMaterial UI 的 Stepper StepLabel 图标问题未定义
【发布时间】：2021-12-13 02:39:33
【问题描述】：

只是在尝试在 Material UI 提供的步进器组件的节点内实现自定义步进标签图标时遇到问题。我正在尝试在每个圆圈内实现一个图标，如从 Material UI 的演示中看到的

但是，我遇到了一个错误

请在下面查看我的代码。谢谢！

import React from 'react';
import { Typography } from '@material-ui/core';
import { withStyles, styles } from '@material-ui/core/styles';


const styles = theme => ({
  checklistHeader: {
    fontWeight: 'bold',
    marginTop: '80px',
    color: 'white'
  },
  connectorIcon: {
    color: theme.palette.text.secondary
  },
  active: {
    backgroundColor: 'green'
  }
});

const steps = ['Select campaign settings', 'Select campaign settings', 'Select campaign settings'];

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%)',
  }),
}));

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 ownerState={{ completed, active }} className={className}>
      {icons[String(icon)]}
    </ColorlibStepIconRoot>
  );
};

const Stepper = ({ classes }) => {
  return (
    <React.Fragment>
      <Typography variant="h6" align="center" gutterBottom className={classes.checklistHeader}>Please complete the following criterion</Typography>
      <Stepper alternativeLabel activeStep={2} style={{ background: 'none' }}>
        {steps.map(label => (
          <Step key={label}>
            <StepLabel StepIconComponent={ColorlibStepIcon}>{label}</StepLabel>
          </Step>
        ))}
      </Stepper>
    </React.Fragment>
  );
};

Stepper.defaultProps = {

};

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

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

样式组件似乎未定义。有什么办法可以绕过这个

【问题讨论】：

标签： javascript css reactjs bootstrap-4 material-ui

【解决方案1】：

styled() 函数仅在 v5 中可用。您要么需要使用 this 安装指南升级到 MUI v5，要么使用 v4 中的旧 API，（等效为 withStyles）：

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

const StyledComponent = styled(Component)({
  // your styles
});

import { withStyles, styles } from '@material-ui/core/styles';

const StyledComponent = withStyles({
  // your styles
})(Component);

您可以查看 v4 文档 here 和 v5 文档 here。

【讨论】：