Can't use global theme overrides for Button disabled

[iansjk]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

When using global style overrides to target the "disabled" css slot on a Button like so:

const theme = createTheme({
  components: {
    MuiButton: {
      styleOverrides: {
        disabled: {
          fontSize: "55rem"
        }
      }
    }
  }
});

The global style override does not apply.

Expected behavior 🤔

Any styles contained in MuiButton.styleOverrides.disabled should be applied to a .MuiButton-root.Mui-disabled.

Steps to reproduce 🕹

Steps:

1. Open https://codesandbox.io/s/globalthemeoverride-material-demo-forked-dpvi1?file=/demo.tsx
2. Observe output: the font size should be gigantic (55 rem), but is clearly the default font size, meaning the override failed

Context 🔦

No response

Your environment 🌎

`npx @mui/envinfo`

``` System: OS: Linux 5.10 Ubuntu 20.04.3 LTS (Focal Fossa) CPU: (12) x64 AMD Ryzen 5 5600X 6-Core Processor Memory: 8.35 GB / 12.43 GB Container: Yes Shell: 5.0.17 - /bin/bash Binaries: Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node Yarn: 1.22.15 - ~/.yarn/bin/yarn npm: 8.1.0 - ~/.nvm/versions/node/v16.13.0/bin/npm Managers: Apt: 2.0.6 - /usr/bin/apt Utilities: Git: 2.25.1 - /usr/bin/git IDEs: Nano: 4.8 - /usr/bin/nano VSCode: 1.62.2 - /home/ian/.vscode-server/bin/3a6960b964327f0e3882ce18fcebd07ed191b316/bin/code Vim: 8.1 - /usr/bin/vim Languages: Bash: 5.0.17 - /usr/bin/bash Perl: 5.30.0 - /usr/bin/perl Python3: 3.8.10 - /usr/bin/python3 ``` (I use Chrome)

[jasurkurbanov]

@iansjk I think you need to use the '&.Mui-disabled' syntax for achieving this:

components: {
    MuiButton: {
      styleOverrides: {
        root: {
          "&.Mui-disabled": {
            fontSize: "5rem"
          }
        }
      }
    }
  }

Reason for this: The MuiButton component increases the CSS specificity of the disabled internal state. You can not override it like this:

{
  "disabled": {
    "fontSize": "55rem"
  }
}

Read more about it https://mui.com/customization/how-to-customize/#state-classes

Complete solution https://codesandbox.io/s/globalthemeoverride-material-demo-forked-xgoyp?file=/demo.tsx

[siriwatknp]

@jasurkurbanovinit Thanks for pointing that out. However, as I go through the doc, it says that:

The list of each component's classes is documented under the CSS section of its API page.

This means disabled should work. I am still reluctant to say if we should fix the doc or we should make disabled styleOverrides work?

cc @oliviertassinari @mnajdova

[iansjk]

Yes, what @siriwatknp said. I'm currently working around this issue as follows (using the root css slot and &:disabled):

  MuiButton: {
      styleOverrides: {
        root: {
          // other properties...
          "&:disabled": {
            color: ...,
            backgroundColor: ...,
          },
        },
      },
    },

... but this should not be necessary. It should be possible to specify the disabled slot alongside the root one and assign CSS properties to that.

[mnajdova]

We should remove these keys from the styleOverrides in v6, till then hopefully the warning can guide developers

[hoangbn]

Is it possible to "unset" default color and background color of .Mui-disabled instead of overwriting it? I want it to keep color from root (i.e primary color if primary was specified, secondary if secondary was specified, etc.)

[mariotee]

@hoangbn , i used to be able to do this in material ui

import palette from '../palette.js';

export default {
  containedPrimary: {
    '&$disabled': {
      opacity: palette.action.disabled.opacity,
      backgroundColor: palette.primary.main,
    },
  },
  containedSecondary: {
    '&$disabled': {
      opacity: palette.action.disabled.opacity,
      backgroundColor: palette.secondary.main,
    },
  },
};

and then referenced in the theme object like

...
overrides: {
    MuiButton: buttonOverrides,
    MuiSwitch: toggleWithBarOverrides,
    MuiCheckbox: toggleOverrides,
    MuiRadio: toggleOverrides,
  },
...

and porting to v5 sort of broke this. so here is what i do now for this kind of override:

import palette from 'style/palette';
import { buttonClasses } from '@mui/material';

const override = {
    containedPrimary: {
        ['&.' + buttonClasses.disabled]: {
            opacity: palette.action.disabledOpacity,
            backgroundColor: palette.primary.main,
        },
    },
    containedSecondary: {
        ['&.' + buttonClasses.disabled]: {
            opacity: palette.action.disabledOpacity,
            backgroundColor: palette.secondary.main,
        },
    },
};

export default override;

and referenced in the main theme like

import {
    createTheme
} from '@mui/material/styles';

import palette from "style/palette";
import buttonOverrides from 'style/overrides/buttonOverrides';
import toggleWithBarOverrides from 'style/overrides/toggleWithBarOverrides';
import toggleOverrides from 'style/overrides/toggleOverrides';

const theme = createTheme({
    palette,
    shape: {
        borderRadius: 2,
    },
    components: {
        MuiButton: {
            styleOverrides: buttonOverrides,
        },
        MuiSwitch: {
            styleOverrides: toggleWithBarOverrides,
        },
        MuiCheckbox: {
            styleOverrides: toggleOverrides,
        },
        MuiRadio: {
            styleOverrides: toggleOverrides,
        },
    },
});

export default theme;

[vlad-audiri]

Is it possible to "unset" default color and background color of .Mui-disabled instead of overwriting it? I want it to keep color from root (i.e primary color if primary was specified, secondary if secondary was specified, etc.)

Unfortunately you can't. You need to describe all the colours with disabled class. Luckily, you only need to provide color for the root. In my case for slider i used this:

MuiSlider: {
      styleOverrides: {
        root: {
          '&.Mui-disabled': {
            '&.MuiSlider-colorPrimary': {
              color: '#006FF6'
            },
            '&.MuiSlider-colorSecondary': {
              color: '#F68700'
            },
            '.MuiSlider-thumb': {
              backgroundColor: '#0a0a0a'
            }
          }
        }
      }
    }

[shuvyA]

My code worked, I needed a different disable color for each variant:

"@mui/material": "^5.6.4",
    "@mui/styles": "^5.6.1",

MuiButton: {
      styleOverrides: {

        root: {

          '&.MuiButton-contained': {

            '&.Mui-disabled': {
              backgroundColor:: 'color',
              color:: 'color',
            },
          },

          '&.MuiButton-outlined': {

            '&.Mui-disabled': {
              borderColor: 'borderColor',
              color: 'color',
              backgroundColor: 'unset',
            },
          },
        },
      },
    },`

[MarcusCody]

How do I override the variant border color for JoyUI's JoyButton globally? JoyButton-outlined is not working

    JoyButton: {
      styleOverrides: {
        root: {
          '&.JoyButton-outlined': {
            borderColor: 'green', // Customize border color for outlined variant
            color: 'var(--joy-palette-neutral-outlinedColor)' // Customize text color for outlined variant
          }
        }
      }
    }