How to Set MUI Divider Color (And Add Text!)

Like many component libraries, Material-UI for React comes with a Divider component. Unlike many libraries, it is possible customize the Material-UI Divider text and color through the component’s built-in API.

In this article, we’ll create the below:

Notice that the color of the first divider is green on the left, blue on the right. This is different than the second divider, which has a background color instead.

Code Sandbox link is below in the Resources section.

MUI Divider JSX

There is almost no customization of the Divider JSX in our example:

<List component="nav" className={classes.root} aria-label="mailbox folders">
  <ListItem button>
    <ListItemText primary="Inbox" />
  </ListItem>
  {/* make sure to use MUI version 5.x */}
  <Divider className={classes.itemOne}>Example Text!</Divider>{" "}
  <ListItem button>
    <ListItemText primary="Drafts" />
  </ListItem>
  <Divider className={classes.itemTwo}>Example Text!</Divider>{" "}
  <ListItem button>
    <ListItemText primary="Trash" />
  </ListItem>
</List>

Make sure that you are using @material-ui/core version 5.x or above. Previous versions of React Material-UI do not support text inside the Divider component. By default, many of the Code Sandbox demos are importing mui core version 4.

Notice that I have root class on <List>, and itemOne and itemTwo on the two <Divider> components. The component simply receives text as its child prop if desired.

Interestingly, some components use a divider prop instead of a Divider component.

If you want to read more about the Link and List components used, read this article.

MUI Divider Styling

We can see from dev tools that the divider component is composed of a div with a child span and a :before and :after pseudo element.

This knowledge will help us correctly target the divider for custom styling. In this case, I will target color, font size, border-top, and background color on the Material-UI Divider.

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      "&.MuiList-root": {
        marginTop: 100,
        margin: "auto"
      },
      width: "100%",
      maxWidth: 360,
      backgroundColor: theme.palette.background.paper,
      border: "1px solid rgba(0,0,0,.1)",
      borderRadius: 12,
      //default styling of Divider children
      "& .MuiDivider-wrapper": {
        fontSize: 24
      }
    },
    itemOne: {
      "&.MuiDivider-root": {
        "&::before": {
          borderTop: "thin solid green"
        },
        "&::after": {
          borderTop: "thin solid blue"
        }
      },
      "& .MuiDivider-wrapper": {
        fontSize: 16
      }
    },
    itemTwo: {
      backgroundColor: "rgba(0,0,0,.2)",
      "& .MuiDivider-wrapper": {
        color: "grey"
      }
    }
  })
);

Notice that in the root class I added ‘default’ styling for all elements with class .MuiDivider-wrapper. This is the class that Material-UI applies to the span which contains any children or text inside the divider. Later, inside itemOne and itemTwo, I more specifically target each divider. This was simply for the sake of example.

Changing the divider color was tricky. I had to target the before and after pseudo elements of the divider using &::before and &::after. This also needed to be under the &.MuiDivider-root selector in order to be specific enough to override the default Material-UI styling of the pseudo elements. 

Notice also that the attribute that needed to be updated was the border-top attribute, not color or background color. In the element with itemTwo class, I set the background color simply to show the effect, but it’s likely not the desired styling for most people.

Dividers are commonly used in Card components. Cards make a great utility component for many layouts and are the foundational component in this Transfer List.

Resources

Here’s how to customize Divider width and thickness.

Check out the MUI Spacer component I created for external spacing.

Test your JavaScript knowledge with these 50 challenging JavaScript questions!

Code Sandbox: https://codesandbox.io/s/custom-material-ui-divider-kuoms