Divider color change React Material Ui

Question

I'm working with the divider component of the material ui framework and am stuck with the color changing aspect. With most other components from this framework I've been able to change the color by applying the useStyles() method as such:

const useStyles = makeStyles(theme => ({
    textPadding: {
      paddingTop: 10,
      paddingBottom: 10,
      color:'white',
    },
}));

But I'm not able to change the color of the dividers using the same approach:

const useStyles = makeStyles(theme => ({
dividerColor: {
  backgroundColor: 'white',
},
}));

I of-course then apply it to the component:

<Divider classname={classes.dividerColor}></Divider>

I looked up the docs for it but can't figure out what I've done wrong. Could someone give me a helping hand?

Solution 1

use the classes API to change the divider color:

const useStyles = makeStyles((theme) => ({
  divider: {
      // Theme Color, or use css color in quote
      background: theme.palette.divider,
  },
}));


<Divider classes={{root: classes.divider}} />

Divider API, To get your head around Material UI Theme

Solution 2

You have to override the CSS using classes.

<Divider classes={{root: classes.dividerColor}} />

See the Material UI docs on CSS overrides: https://material-ui.com/customization/components/#overriding-styles-with-classes

Solution 3

You should always use className while using material-ui styling instead of typical javascript style declaration like classname.

You can refer to the official doc also: https://material-ui.com/styles/basics/#hook-api

Solution 4

You can use
<Divider style={{ background: 'black' }} variant="middle" />

Solution 5

To change Divider line color in MUI v5 you need to adjust your approach depending on whether the element has children or not.

For an empty Divider:

<Divider sx={{ bgcolor: "secondary.light" }} />

For a Divider with content:

<Divider
  sx={{
    "&::before, &::after": {
      borderColor: "secondary.light",
    },
  }}
>
  <Typography>Some Text</Typography>
</Divider>

Comparing to the other answers for v5, note that you do not need to nest the SX props under &.MuiDivider-root and you can use the theme properties with the SX shorthand strings (e.g., secondary.light instead of (theme) => theme.palette.secondary.light.

View more solutions

Comments

[Ali Yar Khan]

simple ... elegant

[shredGnar]

This worked for me.