CODEWITHSUNDEEP
cssmaterial-uiattributesstylingdivider
G M
G M

Reputation: 361

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?

Upvotes: 14

Views: 33476

Answers (2)

Ryan Speciale
Ryan Speciale

Reputation: 178

Thats a real thicc boi

<Divider sx={{ borderBottomWidth: '45px' }} />

Upvotes: 7

NearHuscarl
NearHuscarl

Reputation: 81585

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

Upvotes: 29

Related Questions