MaterialUI Stepper标签多行时垂直StepConnector与StepIcon脱离怎么解决？

你的问题根源是当前MuiStepConnector的lineVertical配置使用了基于单行文字高度的固定负边距与百分比定位，当StepLabel文字变为多行时，容器高度变化导致定位计算失效，出现衔接断层。

你只需要修改ThemeOptions中MuiStepConnector和MuiStepLabel的相关配置即可，修改后的完整配置如下：

import {
  ThemeOptions,
  createTheme,
  ThemeProvider,
  CssBaseline
} from "@material-ui/core";

export const themeOptions: ThemeOptions = {
  overrides: {
    MuiStepper: {
      root: {
        backgroundColor: "transparent" // remove set background
      }
    },
    MuiStepConnector: {
      vertical: {
        padding: 0,
        width: 5,
        marginLeft: 8 // half icon
      },
      lineVertical: {
        // 删掉原来的百分比定位和固定负边距，改为撑满容器高度
        top: 0,
        bottom: 0,
        borderLeftWidth: "2px",
        marginLeft: "-1px", // center (1/2 width)
        borderColor: "lightgrey",
        "$active &, $completed &": {
          borderLeftWidth: "4px",
          marginLeft: "-2px",
          borderColor: "blue"
        }
      }
    },
    MuiStepLabel: {
      label: {
        textAlign: "left",
        fontSize: "1.25rem",
        "&$active": {
          fontWeight: 400
        },
        "&$completed": {
          fontWeight: 400
        }
      },
      iconContainer: {
        paddingRight: 12,
        // 可选：让图标始终和第一行文字对齐，不会随多行文字垂直居中
        alignItems: "flex-start",
        paddingTop: "2px"
      }
    },
    MuiStepIcon: {
      root: {
        display: "block",
        fontSize: "1rem",
        color: "lightgrey",
        "&$completed": {
          color: "blue"
        },
        "&$active": {
          color: "blue"
        }
      }
    }
  }
};

修改后无论StepLabel内文字有多少行，垂直连接器都会自动撑满上下StepIcon之间的全部空隙，不会再出现断开的问题。

内容的提问来源于stack exchange，提问作者Oscar Hermoso