Material UI StepIcon 具有实际图标但保留背景圆圈答案

【问题标题】：Material UI StepIcon to have actual icon but keep background circleMaterial UI StepIcon 具有实际图标但保留背景圆圈
【发布时间】：2021-10-14 04:41:50
【问题描述】：

我已尝试搜索堆栈溢出，但未找到与此尝试相关的特定问题。我正在使用样式化方式来设置 Material UI Stepper 组件的样式。我看到的所有示例都使用 withStyles、makeStyles，除了样式用于更改颜色之外的所有内容。但是，我也想在下面的步骤标签中有一个真正的图标，而不是文本。

每次我将图标组件添加到图标属性时，它只会显示图标并夹住通常包含文本的圆圈。我想保留圆圈并添加图标以及在顶部添加文本。活动/完成将是金色，灰色表示禁用/非活动。

这是我的编码尝试，我尝试了各种组合，将演示中的示例粘贴在 Material UI 网站上，但仍然没有太多运气让图标显示在圆圈内。我需要放弃 StepIcon 组件并将图标包装在 Avatar 组件中吗？

  const TimelineIcon = styled(StepIcon)(({ theme }) => ({
        root: {
          color: theme.palette.primary.light,
          display: "flex",
          height: 22,
          alignItems: "center",
          "&$active": {
            color: theme.palette.success.main,
          },
          "&$completed": {
            backgroundColor: theme.palette.primary.light,
            color: theme.palette.success.main,
            zIndex: 1,
            fontSize: 18,
          },
        },
      }));

      const stepIconComponent = () => {
        return (
          <div>
            <TimelineIcon icon={<Check />} />
          </div>
        );
      };

    <Stepper
      orientation={"horizontal"}
      alternativeLabel
      style={{ width: "100%" }}
    >
      {stepper.steps.map((step: TimelineStepProps) => {
        return (
          <Step key={step.title}>
            <StepLabel StepIconComponent={stepIconComponent}>
              {step.title}
            </StepLabel>
          </Step>
        );
      })}
    </Stepper>

【问题讨论】：

标签： javascript reactjs material-ui react-functional-component uistepper

【解决方案1】：

由于 StepIcon 的设计，如果传递的是实际图标而不是文本或数字，则它不会应用类。这迫使它只显示图标而不是带有它的圆形背景。这是组件：implementation of StepIcon

仅当“图标”是数字或字符串时，强制 StepIcon 应用类的代码如下：

if (typeof icon === 'number' || typeof icon === 'string') {
    const className = clsx(classes.root, {
      [classes.active]: active,
      [classes.error]: error,
      [classes.completed]: completed,
    });

所以我要做的是用圆圈重新创建图标，并为活动或禁用提供两种不同的外观。如果顶部有文本（在示例中是圆圈上方的数字），我还必须设置连接器的样式以将其向下推一点（因为在这种情况下这可能是可选的）

const ActiveSvgIcon = styled(SvgIcon)(({ theme }) => ({
    color: theme.palette.success.main,
    "&.MuiSvgIcon-root": {
      width: "1.2em",
      height: "1.2em",
    },
  }));

  const DisabledSvgIcon = styled(SvgIcon)(({ theme }) => ({
    color: theme.palette.primary.light,
    "&.MuiSvgIcon-root": {
      width: "1.2em",
      height: "1.2em",
    },
  }));

  const getIcon = (step: TimelineStepProps) => {
    return step.active ? (
      <ActiveSvgIcon shapeRendering="circle">
        <circle cx="12" cy="12" r="12" />
        {step.icon}
      </ActiveSvgIcon>
    ) : (
      <DisabledSvgIcon shapeRendering="circle">
        <circle cx="12" cy="12" r="12" />
        {step.icon}
      </DisabledSvgIcon>
    );
  };

  const iconStepComponent = (step: TimelineStepProps) => {
    return (
      <div style={{ marginTop: step.superScript === "" ? "20px" : 0 }}>
        <StepperText>{step.superScript}</StepperText>
        {getIcon(step)}
        <StepperTitle>{step.title}</StepperTitle>
        <StepperText>{step.subTitle}</StepperText>
      </div>
    );
  };

【讨论】：