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

Question

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

每次我将图标组件添加到图标属性时，它只会显示图标并删除通常包含文本的圆圈。我想保留圆圈并添加图标以及在顶部添加文本。 active/completed 是金色，disabled/inactive 是灰色。

这是我的编码尝试，我尝试了各种组合，将演示中的示例粘贴在 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>

Answer 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>
    );
  };

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

Material UI StepIcon to have actual icon but keep background circle

javascript

uistepper

reactjs

material-ui

react-functional-component