Material ui V5 theme AppBar component override

Question

Trying out MUI V5 and using theme to override component default styling.

But when I override like this:

components: {
    MuiAppBar: {
      styleOverrides: {
        root: {
          backgroundColor: theme.palette.primary.dark,
        },
      },
    },

It works fine, and the appbar has the correct color I want by default.

However, when I want to change the color on the Appbar by doing:

It does not work since the theme style override is loaded last.

As you can see in image below, 'secondary' color is loaded first and therefor falls short of the theme override.

What am I doing wrong to actually prevent color property to work when overriding the default appbar color in the theme?

I have also tried this, which makes the color property work after theme has set color.

components: {
    MuiAppBar: {
      defaultProps: {
        color: 'primary', //but i want primary.dark
      },
    },
  },

But then I am limited to use 'primary' and cant use the theme.palette.primary.dark to get the color I want.

Codesandbox where the second appbar should be orange since it has color="secondary"

user_1047546 · Answer

I think by default it takes "primary" unless it's specified otherwise. So if you use colorPrimary instead of root, then it will work as expected.

Here's the working example:

components: {
    MuiAppBar: {
      styleOverrides: {
        colorPrimary: {
          backgroundColor: theme.palette.primary.dark,
        },
      },
    },

If you invoke it should have your primary.dark background color.

If you invoke it will override with secondary color definition.

Here's full type definition for styleOverrides for the reference:

export interface AppBarClasses {
    /** Styles applied to the root element. */
    root: string;
    /** Styles applied to the root element if `position="fixed"`. */
    positionFixed: string;
    /** Styles applied to the root element if `position="absolute"`. */
    positionAbsolute: string;
    /** Styles applied to the root element if `position="sticky"`. */
    positionSticky: string;
    /** Styles applied to the root element if `position="static"`. */
    positionStatic: string;
    /** Styles applied to the root element if `position="relative"`. */
    positionRelative: string;
    /** Styles applied to the root element if `color="default"`. */
    colorDefault: string;
    /** Styles applied to the root element if `color="primary"`. */
    colorPrimary: string;
    /** Styles applied to the root element if `color="secondary"`. */
    colorSecondary: string;
    /** Styles applied to the root element if `color="inherit"`. */
    colorInherit: string;
    /** Styles applied to the root element if `color="transparent"`. */
    colorTransparent: string;
}

Material ui V5 theme AppBar component override

1 Answers