Search code examples
cssmaterial-uiattributesstylingdivider

Material UI Divider Thickness

I'm looking for a solution to increase the Material UI Divider line thickness (stretching horizontal lines vertically or stretching vertical lines horizontally).

I've read the documentation of Material UI v5 at https://mui.com/material-ui/api/divider/.

According to the API, there isn't an attribute to modify the Divider "Thickness".

I've tried different implementations of inline styles (specific to Material UI v5):

<Divider sx={{height:"15px", fontSize:"50px", width:"50px", fontWeight:"bold", padding:"15px"}}/>

None of the mentioned attributes modified the "thickness" of the line.

I'm looking for a solution specific to the Material UI v5 Divider component. I don't want to create a Box component and then implement inline sx attributes or custom classes for that Box component.

Does anybody have any ideas?

Solution

  • You can change the CSS property border-bottom-width to modify the thiccness of the Divider:

    <Divider sx={{ borderBottomWidth: 5 }} />

    For vertical Divider:

    <Divider orientation="vertical" flexItem sx={{ borderRightWidth: 5 }} />

    styled() can also be used to create an enhanced version of Divider that supports a custom thiccness:

    const MyDivider = styled(Divider)(({ thiccness, orientation }) => ({
  ...(thiccness !== undefined &&
    (orientation === "vertical"
      ? { borderRightWidth: thiccness }
      : { borderBottomWidth: thiccness }))
}));

    <MyDivider thiccness={10} />

    <MyDivider orientation="vertical" flexItem thiccness={10} />

    Codesandbox Demo