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

Posted 2023-02-21

【中文标题】当标签覆盖多条线时，步进器垂直线分离？

【英文标题】：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"
        
      
    
  
;

【参考方案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