当标签覆盖多行时步进器垂直线分离？

Question

我的 MaterialUI Stepper // StepLabel 中的文本有时会换行。

无论标签中的文本行数如何，我都需要将垂直 StepConnectors 附加到 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"
        }
      }
    }
  }
};

Answer 1

以防万一以后有人发现这个，我们在交付任务的实现上做出了妥协。

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

之前

// 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

当标签覆盖多行时步进器垂直线分离？

Stepper vertical line detaches when label wraps over multiple lines?

typescript

reactjs

material-ui

react-css-modules

react-component

沙盒

当前截图

现有主题选项

之前

之后

沙盒