MUI React Theme palette contrastText doesn't work

user_15951078 0
Viewed 361

I'm using MUI React to create a menu and I used the AppBar component. I want to customize in this way:

brown.myBrown = '#544846';
const brownTheme = createTheme({
    palette: {
        primary: {
            main: brown.myBrown,
            contrastText: grey[50]
        }
    }
});

The contrastText field doesn't work and the result is a brown appBar with also text color brown as show here:

Screenshot of AppBar component The menu items are visibile only when I hover on them.

How can I change the item color in grey[50]?

material-design material-ui reactjs javascript
1 Answers

The value of contrastText only gets applied if you set the color property as follows in your AppBar component:

<AppBar color={'primary'}>

(Or to 'secondary' if you want to use the corresponding contrastText value.)

If you don't want to set that property you can also use this approach:

const theme = useTheme();
...
<AppBar [...] sx={{color: theme.palette.primary.contrastText}}>

color doesn't set the background-color but the color of descendants.

user_183587870
Related