Overriding component style with theme makes color prop unusable

[henrikmaa]

When creating a theme and overriding AppBar component with stylesOverride the color prop on the Appbar does not work.

• [x ] The issue is present in the latest release.
• [x ] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When creating a theme override for AppBar component like this:

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

The appbar has the color I specify above (which is correct)

But when I do <AppBar color="secondary" /> The color is still stuck on the color specified in the theme override.

Expected Behavior 🤔

When specifying another color in the color prop, the theme should not have priority over the color prop.

Steps to Reproduce 🕹

https://codesandbox.io/s/angry-darkness-b2h7y?file=/src/Demo.tsx

When checking the chrome devtools you can see the load order of the background-color is wrong.

the theme override is always loaded last, therefor the color prop value is overrwritten.

Context 🔦

I want all components to follow a default styling, but in some cases my components need to have another color than default.

[mnajdova]

It is expected, as those are defined in the theme for all props combination, so they would always override. You need to scope your override for specific combination of the props, for example when color: 'primary'. I would suggest using the variants option and specify the props combination you want applied for those overrides. For example - https://codesandbox.io/s/floral-thunder-69kwo?file=/src/theme.tsx

[henrikmaa]

This makes sense! Thanks.