Material-UI has a useful divider component for separating list items, divs, or any other element. The divider visually appears as a horizontal line separator. We can customize the thickness and width of this line with a few CSS values.
I started with this example from the MUI docs and then styled the horizontal dividers. The first one is an example of custom thickness, the second is an example of custom width:
The secret to setting thickness is to adjust the border-bottom-width value. The secret to custom width is to change the margin, and the width will automatically adjust.
Material-UI Horizontal Divider
The Divider has a couple of important props that affect how it renders.
variant– Provides basic width optionscomponent– Allows the Divider to render as a different element. The default ishr.
The DOM tells us some interesting things about the divider. When I set the component value to li, it renders as an li (of course) and it adds role="separator". We also see the MuiDivider-root class, which can be used for styling if needed.
When I set variant="inset", MUI adds margin-left: 72px. This value does not seem to change no matter how wide the list is.
Material-UI Divider Thickness
Here’s the code to change Divider thickness:
<Divider component="li" sx={{borderBottomWidth: 4}}/>The Divider in this example is an li rendering with a bottom border. That’s really the extent of the component. The borderBottomWidth value changes the thickness of the bottom border, which actually gives the Divider more height (and more visual thickness).
Material-UI Divider Width
Here’s the code to change MUI Divider width:
<Divider component="li" sx={{marginLeft: '5%', marginRight: '5%'}}/>You can also use one of the three variant values (middle, inset, fullWidth), but directly setting margin with sx gives you more control.
The Divider nicely reduces it’s width to account for margin increases. If you need space on the left side, I highly recommend using marginLeft. If you need space on the right, you can either set the width value (i.e. width: '95%') or use marginRight, which I recommend.
Related Links
Here are additional useful posts:
