在 Material UI Stepper 中仅设置圆圈大小的正确方法？

Question

正如您在this codesandbox 中看到的，我使用了基于this answer 的“转换”属性，还尝试更改StepIconProps 上的font-size（在CSB 上注释掉代码）。

第一个选项会调整圆的大小，同时仍保持其中心，因此它与线条对齐，但文本保持在同一个位置。

第二个选项意味着圆圈失去了与线条的对齐方式，但文本相对于圆圈保持良好的位置。

我不确定这两种方法是否完全正确。有一个example in the docs 的图标已被自定义，但这涉及实现一个全新的图标，我宁愿避免。我对所有默认外观都很满意，唯一的例外是尺寸。

Answer 1

我使用样式化组件创建了一个 div 元素，并将它作为道具 icon 从材质 UI 传递到 StepLabel。

import React, { useState, useEffect } from "react";
import { Stepper, Step, StepLabel } from "@material-ui/core";

const stepsOptions = {
  0: [0],
  1: [0, 1],
  2: [0, 1, 2],
};

const StepIcon = styled.div`
  background-color: ${({ backgroundColor }) =>
    backgroundColor ? "#008a98" : "#DCDCDC"};
  color: #fff;
  width: 50px;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  font-size: 20px;
  border-radius: 50%;
  margin-top: -13px;
  font-weight: 500;
  z-index: 1;
`;

const Component = () => {

  const [stepsArray, setStepsArray] = useState([]);

  useEffect(() => {
    setStepsArray(stepsOptions[activeStep]);
  }, [activeStep]);
  
  return (
    <Stepper activeStep={activeStep} alternativeLabel>
      {steps.map((label, index) => (
        <Step key={label}>
          <StepLabel
            icon={
              <StepIcon backgroundColor={stepsArray.includes(index)}>
                <p>{index + 1}</p>
              </StepIcon>
            }
          >
            <Paragraph>{label}</Paragraph>
          </StepLabel>
        </Step>
      ))}
    </Stepper>
  )}