CODEWITHSUNDEEP
javascriptreactjsfrontendmaterial-ui
Sirre
Sirre

Reputation: 287

Divider color change React Material Ui

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?

Upvotes: 26

Views: 78263

Answers (13)

yns
yns

Reputation: 1

Divider is like a border, it should work like this:

<Divider sx={{ borderColor: "your-color" }} />

Upvotes: 0

SHATHISH B
SHATHISH B

Reputation: 11

        <Divider
          sx={{
            "&.MuiDivider-root": {
              "&::before": {
                border: `thin solid 'your choice of color'`,
              },
              "&::after": {
                border: `thin solid 'your choice of color'`,
              },
            },
          }}
        >
          or
        </Divider>

Upvotes: 1

Yahya Aghdam
Yahya Aghdam

Reputation: 569

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%'}} />

Upvotes: 1

Daniil Lutskii
Daniil Lutskii

Reputation: 1

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>

Upvotes: 0

DINA TAKLIT
DINA TAKLIT

Reputation: 8388

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

Upvotes: 4

Kwuasimoto
Kwuasimoto

Reputation: 71

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>

Upvotes: 3

basse
basse

Reputation: 1339

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.

Upvotes: 21

Firoj Siddiki
Firoj Siddiki

Reputation: 1941

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

Upvotes: 0

Sephyre
Sephyre

Reputation: 426

Example with className :

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


<Divider className={classes.divider} />

Upvotes: 0

Gnyasha
Gnyasha

Reputation: 684

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

Upvotes: 12

Ericgit
Ericgit

Reputation: 7053

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

Upvotes: 17

Kendra Loves Code
Kendra Loves Code

Reputation: 305

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

Upvotes: 4

sidverma
sidverma

Reputation: 1185

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

Upvotes: 3

Related Questions