[material-ui] styleOverrides behaviour is different in MUI v4 and v5 about material-ui HOT 4 CLOSED

can you please explain more ?

from material-ui.

Sure, we have a MUI v4 theme where we have overrides setup which looks like this:

const theme = createTheme({
  overrides: {
    MuiButton: {
      contained: {
        backgroundColor: "grey",
      },
    },
  },
});

Now, if we have a button here which doesn't have a color defined f.e. <Button variant="contained">Grey</Button> , this button will have the backgroundColor from the overrides which is fine. But if a color="primary" is added to the same button, it will no longer have the backgroundColor from overrides but the actual primary color. This is the expected behaviour.
This behaviour is explained in this codesandbox which uses MUI v4.

Now, we're trying to upgrade to v5. In MUI v5, after following the docs and everything, I updated my config for the overrides as per the migration guides and overrides look like this:

const theme = createTheme({
  components: {
    MuiButton: {
      styleOverrides: {
        contained: {
          backgroundColor: "grey",
        },
      },
    },
  },
});

But after making this change and upgrading to v5, the behaviour is no longer the same as described above. Now, the overrides are being applied to both buttons regardless of color="primary" defined or not which is not desirable. This behaviour can be seen in this codesandbox with MUI v5.

from material-ui.

The answer was posted on StackOverflow: https://stackoverflow.com/a/78167813.

from material-ui.

👋 Thanks for using our open-source projects!

We use GitHub issues exclusively as a bug and feature requests tracker, however,
this issue appears to be a support request.

For support with Material UI please check out https://mui.com/material-ui/getting-started/support/. Thanks!

If you have a question on Stack Overflow, you are welcome to link to it here, it might help others.
If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.

from material-ui.