MUI 步进器图标未显示

Question

我正在尝试让 MUI 步进器组件在每个步骤节点内实际呈现一些图标。但是，当我尝试这样做时，它只会呈现一个没有任何内容的空白屏幕。我想要这个外观（如文档中所示）。

如您所见，所需的外观是内部带有图标，MUI 提供了下面的示例代码。但是当我尝试实现它时，我得到一个空白屏幕

const ColorlibStepIconRoot = styled('div')(({ theme, ownerState }) => ({
  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: <Icon>star</Icon>,
    2: <Icon>star</Icon>,
    3: <Icon>star</Icon>,
  };

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


<Stepper alternativeLabel activeStep={2} style={{ background: 'none' }}>
        {steps.map(label => (
          <Step key={label}>
            <StepLabel StepIconComponent={ColorlibStepIcon}>{label}</StepLabel>
          </Step>
        ))}
      </Stepper>

Answer 1

当步骤图标未激活或未完成时，您没有在ColorlibStepIconRoot 中设置背景颜色，因此背景颜色是透明的，图标颜色是白色的，而您在白色背景上看不到任何东西：

const ColorlibStepIconRoot = styled('div')(({ theme, ownerState }) => ({
  backgroundColor:
    theme.palette.mode === 'dark' ? theme.palette.grey[700] : '#ccc',
  ...