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

Question

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

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

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

我不确定两者都是完全正确的方法。文档中有一个自定义图标的示例，但这涉及实现一个全新的图标，我宁愿避免。我对所有默认外观都很满意，唯一的例外是尺寸。

标签： material-ui

Answer 1

我使用样式化的组件创建了一个 div 元素，并将它作为道具传递icon给StepLabelMaterial UI。

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