CODEWITHSUNDEEP
reactjsmaterial-ui
max_
max_

Reputation: 75

How to pass an object with overrides styles to createTheme

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;

Upvotes: 1

Views: 465

Answers (1)

Felipe de Abreu Prazeres
Felipe de Abreu Prazeres

Reputation: 476

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.

Upvotes: 1

Related Questions