Search code examples
reactjstypescriptmaterial-uireact-componentreact-css-modules

Stepper vertical line detaches when label wraps over multiple lines?


The text inside my MaterialUI Stepper // StepLabel sometimes wraps over multiple lines.

I need to keep the vertical StepConnectors attached the StepIcons regardless of the number of lines of text in the label.

I've tried other solutions such as using CSS pseudo tags, but I hit a wall every time I try to work those changes into our existing solution.

Massive thanks in advance to anyone who can help.

Sandbox

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

Current Screenshot

enter image description here

Existing ThemeOptions

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"
        }
      }
    }
  }
};

Solution

  • Just in case anyone finds this in the future, we compromised on the ​implementation to deliver the task.

    Instead of having a variable height on the MuiStepLabel, it was given a fixed height to keep the StepIcons the same distance apart. If you imagine the below screenshot with a different font size + spacing, it ended up looking OK, but not ideal.

    Before

    // src/Theme/index.tsx
    
    export const themeOptions: ThemeOptions = {
      overrides: {
        MuiStepConnector: {
            marginTop: "-6px",
            marginBottom: "-6px",
        }
        MuiStepLabel: {}
      }
    }
    

    After

    // 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",
        }
      }
    }
    

    Sandbox

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

    enter image description here