正确的方法来设置只有圆的大小在材料UI步进?

Question

正如您在这个codesandbox中看到的，我使用了'transform'属性，基于这个答案，还尝试改变StepIconProps上的font-size(注释掉CSB上的代码)。

第一个选项的结果是圆的大小调整，但仍然保持其中心，因此它与直线对齐，但文本保持在相同的位置。

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

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

Answer 1

我使用样式组件创建了一个div元素，并将其作为道具icon在StepLabel从材质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>
)}