Override .Mui-disabled (or other pseudo-classes/states) from the theme (MUI v4.1.X)

Question

I'd like to override the global .Mui-disabled CSS rule from my theme overrides. I can do it for specific components like this (in Material-UI v4.1.x):

MuiTheme['overrides'] = {
  ...
  MuiMenuItem: {
    root: {
      ...root level overrides,
      '&.$Mui-disabled': {
        backgroundColor: 'inherit'
      }
    }
  }
}

I'd like to avoid the need to add that to each different component and simply override the .Mui-disabled class rules once. Basically I don't want all disabled items to have the default grey colored background. Is there an easy way to do that from the theme?

Thanks for any insight!

Answer 1

I was struggling to figure how to override pseudo-classes myself. There are two approaches that I found;

globally when defining your custom theme;

export const CKWTheme = createMuiTheme({
    overrides: {
        MuiCssBaseline: {
            '@global': {
                //override the pseudo-classes
                '.Mui-disabled': { opacity: .5 }
                '.Mui-selected': { background: 'red' }
            }
        }
    },
});

which lot of times doesn't help, since they are applied more css-specific. In that case, you can override them when defining your style for a component;

const useStyles = makeStyles((theme: Theme) =>
    createStyles({
        root: {
            borderRadius: theme.shape.borderRadius,
            '&.Mui-disabled': {
                color: theme.palette.primary.main,
                opacity: 0.5,
            },
            '&.Mui-disabled:hover': { background:theme.palette.secondary.main },
        }
    }),
);