Why do we have multiple color declarations for Material UI?

user_209904 0
Viewed 77

Shouldn't the palette theme update also affect other elements on the app such as buttons?

If we write this:

import blue from '@material-ui/core/colors/blue';

const theme = createTheme({
  palette: {
    primary: blue,
  },
})

Buttons components will not change to the primary color created. Also, if I create a box and provide the following:

<Box color='primary.main'>primary.main</Box>

it wont change the color of the text unless I do the following

<Box color='palette.primary.main'>primary.main</Box>

Is there a logistic behind it? I am assuming it has something to do with the auto change of colors when going to a different hue or dark but I am not 100% certain.

react-material material-ui
1 Answers

you must access the main property to change it :

import blue from '@material-ui/core/colors/blue';

const theme = createTheme({
  palette: {
    primary: {
      main : blue,
    }
  },
})
user_139554180
Related