材质UI-带线条的阶梯式顶部和底部标签

Question

我试图用Material UI(V5(制作一个步进器。这是我的代码：

import * as React from 'react';
import Box from '@mui/material/Box';
import Stepper from '@mui/material/Stepper';
import Step from '@mui/material/Step';
import Typography from '@mui/material/Typography';
import StepLabel from '@mui/material/StepLabel';
const steps = [
'Step 1 - Top',
'Step 2 - Top',
'Ste^3 - Top',
];
export default function HorizontalLabelPositionBelowStepper() {
return (
<Box sx={{ width: '100%' }}>
<Stepper activeStep={1} alternativeLabel
>
{steps.map((label) => (
<Step key={label}>
<Typography>Top text</Typography>
<StepLabel>{label}</StepLabel>
</Step>
))}
</Stepper>
</Box>
);
}

这给出了这样的结果：

在此处输入图像描述

如何正确定位行和"顶部文本"标签？

如何将图标与线条对齐，例如：带有图标的图像和线条对齐的

我需要在Stepper之前创建一个单独的网格或长方体来创建顶部标签吗？非常感谢。

谢谢你的建议。

Marc

Answer 1

Bellow我有您需要的代码，包括两个解决方案。

解决方案1速度更快，当步骤的标签文本之间的宽度相似时，效果会更好。如果没有，则必须为每个子级指定.MuiStepConnector-root、left和right属性，这样才能获得更好看的结果。

解决方案2包含了更多的代码，但无论每个标签文本的宽度如何，都可以工作。由于它使用了背景色，请确保将其更改为与您的背景相匹配。

下面是代码沙盒，可以使用它并查看两种有效的解决方案。请确保根据要尝试的解决方案对代码进行注释或取消注释。

代码：

import * as React from "react";
import Box from "@mui/material/Box";
import Stepper from "@mui/material/Stepper";
import Step from "@mui/material/Step";
import StepLabel from "@mui/material/StepLabel";
import { Typography } from "@mui/material";
const steps = ["Step 1 - Top", "Step 2 - Top", "Ste^3 - Top"];
// Solution 1
const StepperSx = {
"& .MuiStepConnector-root": {
left: "calc(-50% + 40px)",
right: "calc(50% + 40px)"
},
"& .MuiStepConnector-line": {
marginTop: "22px"
}
};
// Solution 2
// const StepperSx2 = {
//   textAlign: "center",
//   "& .MuiStepConnector-root": {
//     zIndex: "1",
//     position: "relative"
//   }
// };
// Solution 2
// const TypographySx = {
//   zIndex: "2",
//   background: "#FFF",
//   display: "inline",
//   position: "relative",
//   padding: "0 15px"
// };
export default function HorizontalLabelPositionBelowStepper() {
return (
<Box sx={{ width: "100%" }}>
<Stepper
activeStep={1}
alternativeLabel
sx={StepperSx} // For solution 1
// sx={StepperSx2} // For solution 2
>
{steps.map((label) => (
<Step key={label}>
<Typography
align="center"
// sx={TypographySx} // For solution 2
>
Top text
</Typography>
<StepLabel>{label}</StepLabel>
</Step>
))}
</Stepper>
</Box>
);
}