从函数调用MUI5步长意外垂直线

Question

嗨，我正在尝试开发MUI5垂直步进，但是在从函数呈现步骤时遇到了问题。因此，在第一步的顶部有一条额外的连接线。

https://codesandbox.io/s/customizedsteppers-material-demo-forked-vpgt8i?file=/demo.tsx

​

​

Answer 1

您需要将组件作为函数调用。

const steps = ["Step1", "Step2", "Step3"];

const RenderTree = ({ label }) => (
  <Step>
    <StepLabel>{label}</StepLabel>
  </Step>
);

export default function CustomizedSteppers() {
  return (
    <Stepper orientation="vertical">
      {steps.map((label) => RenderTree({ label }))}
    </Stepper>
  );
}