Material-ui: MenuItem: add ability to style disabled

[tpeek]

• [x] This is not a v0.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

We should be able to override disabled MenuItems like so:

createMuiTheme({
    overrides: {
      MuiMenuItem: {
        disabled: {
          color: 'blue',
        },
      },
    },
  });

Or, following the new syntax:

createMuiTheme({
    overrides: {
      MuiMenuItem: {
        root: {
          '&$disabled': {
            color: 'blue',
          },
        },
      },
    },
  });

Current Behavior 😯

The only way to override the styles for a disabled MenuItem is by overriding ListItem styles:

createMuiTheme({
    overrides: {
      MuiListItem: {
        disabled: {
          color: 'blue',
        },
      },
    },
  });

Examples 🌈

Context 🔦

We want to style disabled ListItems and disabled MenuItems differently.

[oliviertassinari]

We want to style disabled ListItems and disabled MenuItems differently.

@tpeek You can create a wrapper. Something like this:

import { styled } from '@material-ui/styles';
import MuiMenuItem from '@material-ui/core/MenuItem';

const MenuItem = styled(MuiMenuItem)({
  color: props => props.disabled ? 'blue' : 'red',
});

export default MenuItem;

[tpeek]

You can create a wrapper. ...

We try to keep all the style changes in the overrides, that way we can use the ThemeProvider and Material-UI components directly. It’s much more convenient than adding custom logic every time or remembering which components you need to import from locally or from Material-UI.

[oliviertassinari]

We try to keep all the style changes in the overrides

@tpeek For a limited number of overrides it's fine:

const theme = createMuiTheme({
  overrides: {
    MuiMenuItem: {
      root: {
        color: props => (props.disabled ? "blue" : "red")
      }
    }
  },
});

https://codesandbox.io/s/y6j72775x

[tpeek]

Awesome, that will work for our use case. Thank you!

I think it would still be nice to add the ability to style it as I suggested above, to match the api of many other components that you can style via overrides when disabled, without needing to access props.

[oliviertassinari]

I think it would still be nice to add the ability to style it as I suggested above

@tpeek I have no objection with that.

[tpeek]

For a limited number of overrides it's fine: ...

By this, do you mean that we shouldn't overuse this feature for performance reasons, or does this only work in certain overrides?

[oliviertassinari]

@tpeek The theme is a singleton, you can't leverage code splitting.

[oliviertassinari]

Another possible solution: the .Mui-disabled pseudo-class.