如何更改 MUI Stepper 组件中的线路连接器，使步骤图标之间没有空格

Question

我正在尝试使用 MUI 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 { StepLabel, StepConnector } from "@mui/material";
import StepContent from "@mui/material/StepContent";
import Button from "@mui/material/Button";
import Paper from "@mui/material/Paper";
import Typography from "@mui/material/Typography";
import { styled } from "@mui/material/styles";
import RadioButtonCheckedIcon from "@mui/icons-material/RadioButtonChecked";
import CheckCircleIcon from "@mui/icons-material/CheckCircle";
import CircleOutlinedIcon from "@mui/icons-material/CircleOutlined";

const steps = [
  {
    label: "Trade-in started",
    description: `04/01/2023`
  },
  {
    label: "Device inspected"
  },
  {
    label: "Trade-in complete (credit pending)"
  }
];

const ActiveStepIcon = styled(RadioButtonCheckedIcon)(({ theme }) => ({
  color: "black"
}));

const NonActiveStepIcon = styled(CircleOutlinedIcon)(({ theme }) => ({
  color: "grey"
}));

const CompletedStepIcon = styled(CheckCircleIcon)(({ theme }) => ({
  color: "black"
}));

const CustomStepConnector = styled(StepConnector)(({ theme }) => ({
  "& .MuiStepConnector-line": {
    minHeight: "131px",
    borderLeft: "2.5px solid black" // Add a border to simulate the line
  },
  "& .MuiStepConnector-icon": {
    marginLeft: "-12px" // Adjust this value as needed to control the spacing
  }
}));

export default function VerticalLinearStepper() {
  const [activeStep, setActiveStep] = React.useState(0);

  const handleNext = () => {
    setActiveStep((prevActiveStep) => prevActiveStep + 1);
  };

  const handleBack = () => {
    setActiveStep((prevActiveStep) => prevActiveStep - 1);
  };

  const handleReset = () => {
    setActiveStep(0);
  };

  return (
    <Box sx={{ maxWidth: 400 }}>
      <Stepper
        activeStep={activeStep}
        orientation="vertical"
        connector={<CustomStepConnector />}
      >
        {steps.map((step, index) => {
          const stepProps = {};
          const labelProps = {
            StepIconComponent:
              activeStep === index
                ? ActiveStepIcon
                : steps[index].completed
                ? CompletedStepIcon
                : NonActiveStepIcon
          };
          if (index === 0) {
            labelProps.optional = (
              <Typography variant="caption">{step.description}</Typography>
            );

            // setActiveStep(1)
          }
          // if (isStepSkipped(index)) {
          //   stepProps.completed = false
          // }
          return (
            <Step key={step.label} {...stepProps}>
              <StepLabel {...labelProps}>{step.label}</StepLabel>
            </Step>
          );
        })}
      </Stepper>
    </Box>
  );
}

我尝试删除

MuiStep-root

和

MuiStepLabel-root

类上的填充和边距，并在

MuiStepConnector-root

上添加 minHeight，但这些并没有删除之间的间距

有人可以解释一下这件事吗？

Answer 1

<Stepper
   {...otherProps}
   sx={{
     "& .MuiStep-root": {
        "& .MuiStepLabel-root": {
          padding: 0,
          height: '20px'
        }
      },
      "& .MuiStepConnector-root": {
        marginLeft: "11px"
      }
   }}

   {children}
</Stepper>