Divider color change React Material Ui

user_8342396 0
Viewed 32829

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?

material-ui reactjs frontend javascript
10 Answers

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

user_81086840

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.

user_76769200
user_116611120

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

user_65780550
user_77214970

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>
user_152040010

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

user_90396460

Example with className :

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


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

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

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>
user_200492900
Related