[theme] How to override the styles of the disabled property?

[VictorTrumpel]

Steps to reproduce

Link to live example: https://codesandbox.io/p/sandbox/objective-hamilton-8cwwr2?file=%2Fsrc%2FApp.js%3A6%2C1

Steps:

1. add theme

Current behavior

Background color isn't red

Expected behavior

Background color is red

Context

Themin

Your environment

all browsers

Search keywords: disabled property override theme

[ZeeshanTamboli]

Targeting using disabled class works. See https://codesandbox.io/p/sandbox/peaceful-dhawan-8pyj6r. But I think disabled as a prop should also be allowed in variants, or we should pick one method (prop or class) and document it. cc @siriwatknp

[siriwatknp]

@ZeeshanTamboli Actually, the custom style is applied to the Button but the default disabled styles has higher specificity.

This is expected for styling, disabled should have higher specificity. The correct approach is to either use a class or :disabled CSS selector:

const theme = createTheme({
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          variants: [
            {
              props: { variant: "contained" },
              style: {
                '&:disabled': {
                  background: 'black',
                }
              },
            },
          ],
        },
      },
    },
  },
});

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@VictorTrumpel How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.