How to pass an object with overrides styles to createTheme - reactjs

Question

In the project I use MaterialUI for styling components. Now I'm creating a project theme. I need to define overrides object to create theme. I have an overrides object in which I override the colorPrimary for the AppBar. I need to use overrides object to create theme. How can i do this?
// TODO: define overrides object to create theme
const overrides = {
MuiAppBar: {
colorPrimary: {
backgroundColor: "#662E9B",
},
},
};
const theme = createTheme({});
// TODO: use overrides object to create theme
// const theme =;
export {
overrides
};
export default theme;

Answer 1

There are two scenarios that I will give you as an answer here, because I am not sure what exactly is your need.
Scenario A: You want to style all your objects with a new primary color. Not only MuiAppBar, but propagate this to everything else such as buttons, checkboxes... for that, you should go like this:
export const theme = createTheme({
palette: {
primary: { main: "#662E9B" }
},
}
Where as "#662E9B" is your custom primary color. MaterialUI will take care of generating your palette based on your the hex color you provided.
Scenario B: You want your colors to remain the same, but changing only the MuiAppBar backgroundColor
const overrides = {
MuiAppBar: {
styleOverrides: {
root: {
backgroundColor: "#662E9B"
}
}
}
export const theme = createTheme({
components: { ...overrides }
}
Now, for Scenario B, in case const overrides is not being used anywhere else in your code, I would suggest you to just do it like so:
export const theme = createTheme({
components: {
MuiAppBar: {
styleOverrides: {
root: {
backgroundColor: "#662E9B"
}
}
}
}
}
Meaning that there would be no need for doing things separatly.