Material UI Divider Thickness

Question

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?

Adenoidectomy

Answer 1

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

Namedropper

Is there also a way to change the thickness and color when using Dividers with text? <Divider sx={{ borderColor: 'primary.main', borderBottomWidth: 5}}> Text </Divider> – Crapulent

e.g. Thickness & color change. sx={{ m: 4, borderBottomWidth:'4px', background: 'purple' }} For thickness any padding property works (e.g. pb, pt) – Semeiology

@ErikMetz Yes, you can do the following: '&.MuiDivider-root': { '&::after': { borderTop: '30px solid rgba(0, 0, 0, 0.12)', }, }. – Bravin

Answer 2

Thats a real thicc boi

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

Octachord