当标签覆盖多条线时，步进器垂直线分离？答案

【问题标题】：Stepper vertical line detaches when label wraps over multiple lines?当标签覆盖多条线时，步进器垂直线分离？
【发布时间】：2021-11-30 02:38:44
【问题描述】：

MaterialUI Stepper // StepLabel 中的文本有时会包含多行。

无论标签中的文本行数如何，我都需要保持垂直 StepConnector 附加在 StepIcons 上。

我尝试过其他解决方案，例如使用 CSS 伪标签，但每次尝试将这些更改应用于我们现有的解决方案时都会碰壁。

非常感谢任何可以提供帮助的人。

沙盒

https://codesandbox.io/s/practical-chebyshev-4hktl?file=/src/App.js

当前截图

现有的主题选项

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: "calc(-50%)",
        bottom: "calc(50%)",
        borderLeftWidth: "2px",
        marginLeft: "-1px", // center (1/2 width)
        marginTop: "-6px", // add -ve margin to top and bottom ...
        marginBottom: "-6px", // ... to hide gap due to smaller icon
        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
      }
    },
    MuiStepIcon: {
      root: {
        display: "block",
        fontSize: "1rem",
        color: "lightgrey",
        "&$completed": {
          color: "blue"
        },
        "&$active": {
          color: "blue"
        }
      }
    }
  }
};

【问题讨论】：

标签： reactjs typescript material-ui react-component react-css-modules

【解决方案1】：

以防万一将来有人发现这一点，我们在实施上做出了妥协以交付任务。

MuiStepLabel 没有使用可变高度，而是给定了一个固定高度，以保持 StepIcon 之间的距离相同。如果您想象下面的屏幕截图具有不同的字体大小 + 间距，它最终看起来还不错，但并不理想。

之前

// src/Theme/index.tsx

export const themeOptions: ThemeOptions = {
  overrides: {
    MuiStepConnector: {
        marginTop: "-6px",
        marginBottom: "-6px",
    }
    MuiStepLabel: {}
  }
}

之后

// src/Theme/index.tsx

export const themeOptions: ThemeOptions = {
  overrides: {
    MuiStepConnector: {
        marginTop: "-2px",
        marginBottom: "-4px",
        minHeight: "calc(24px + 0.5rem)",
    },
    MuiStepLabel: {
        height: "1.25rem",
        lineHeight: "1.25rem",
    }
  }
}

沙盒

https://codesandbox.io/s/epic-bohr-0p7fj?file=/src/Theme/index.ts

【讨论】：