22

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?

1
  • I believe the only issue is that you need className instead of classname (upper case N). In fact, there should be a warning in the console about it. Oct 9, 2019 at 1:25

11 Answers 11

17

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

14

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.

2
  • 2
    This worked for me.
    – shredGnar
    Apr 21, 2022 at 22:32
  • I like the sx approach. Sx is a prop utilized to overwrite default styles, but sometimes I don't know if should use CSS or MUI props as a key inside the sx object. I tried sx={{ color: "primary"}} but it didn't work for some reaso.
    – Simao
    Nov 10, 2022 at 19:30
11

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

3
  • simple ... elegant Nov 16, 2021 at 5:16
  • 1
    This won't work if the divider has text (i.e. children). Nov 25, 2022 at 18:02
  • 1
    This was the one that finally worked for me, yes my divider was empty, was trying to use it as a simple bar graph in a table. Aug 29 at 22:35
4

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

4

You can directly add color attribute to the divider like so

<Divider color="#FDA228" sx={{ height: 2, width: '92px' }} />

the result would be something like this Divider change color and width

1
  • 1
    This did the trick for me, so simple. Thanks
    – Tom Vos
    Jan 11 at 19:32
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

3

Using @mui v5 I recognized this was the only way to make it work for myself.

Note: Because my Divider item has text, the ::before and ::after css selectors specify which side of the divider to style.

<Divider
    sx={{
        '&.MuiDivider-root': {
            '&::before': {
                borderTop: `thin solid ${theme?.palette.primary['700']}`
            } 
        }
    }}
    style={{
        color: "white",
    }}
    variant="middle"
> Editing as - {username} </Divider>
1

In mui5 if you want to change the Divider color, you must add width attribute to sx, otherwise it's not work. With this trick, you can set any color you want:

<Divider color='red' sx={{ width: '100%'}} />
0

Example with className :

const useStyles = makeStyles((theme) => ({
  divider: {
      background: "white",
  },
}));


<Divider className={classes.divider} />
0

In the latest MUI(v5), This is how it is done:


            <Divider
              sx={{ bgcolor: (theme) => theme.palette.divider }}
              style={{
                border: "none",
                height: 2,
                margin: 0,
              }}
            />

0

You can do it with createTheme function inside the react component

    const Theme = createTheme({
                 components: {
                    MuiDivider: {
                       variants: [
                          {
                             props: { variant: 'dynamic' },
                             style: {
                                ":before": {
                                   borderTop: "thin solid #ffffff"
                                },
                                ":after": {
                                   borderTop: "thin solid #ffffff"
                                },
                             }
                          }
                       ]
                    }
                 },
    })

Use it with the variant key in the html component

<Divider variant={'dynamic'} flexItem></Divider>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.