[system] pseudo class overridden in slot

v4: https://codesandbox.io/s/exciting-matsumoto-no6lr?file=/src/App.js OK

v5: https://codesandbox.io/s/friendly-pasteur-e0q3t?file=/src/App.js KO

This is a regression in v5.

Take a look at this Button theme example.

const theme = createTheme({
  components: {
    MuiButton: {
      styleOverrides: {
        contained: {
          '&.Mui-disabled': {
            opacity: 0.65
          }
        },
        containedPrimary: {
          '&.Mui-disabled': {
            color: "#fff",
            backgroundColor: palette.primary.main,
          }
        }
      }
    }
  }
})

<Button variant="contained" disabled /> // opacity 0.65 <Button variant="contained" color="primary" disabled /> // opacity is gone

This is because &.Mui-disabled in contained is overridden by containedPrimary from the implementation in Button.js.

// Button.js
...
overrideResolver: (props, styles) => {
  return {
    ...styles[styleProps.variant],
    ...styles[`${styleProps.variant}${capitalize(styleProps.color)}`],
  }
})
...

This makes customization harder because developer needs to know which key has higher priority.

The goal of this issue is to find a better DX to support theme customisation.

cc @mui-org/core

[siriwatknp]

I wonder, do we need to support this behavior?

I strongly think that we should support. To me it is what I normally do in v4 and if we don’t support, migration to v5 could be frustrating because it is not only about Button or psuedo class, it is about the same key that get overridden in the object.

[oliviertassinari]

Regarding 1. the variant I would also advocate for fixing it 😁

Moved to #26944