Theme overrides, override component and its children

[Floriferous]

When using the theme overrides, I'd like to be able to override a component (MuiListItem for example), and its children (MuiListItemText for example).

I'm assuming this is possible, but I couldn't find an example in the docs where this is done for the whole theme, instead I found examples for a single component only, like this: https://material-ui.com/demos/menus/#menuitem-composition.

What I'm trying to do is something like this:

const theme = createMuiTheme({
    MuiListItem: {
      button: {
        '&:hover': {
          backgroundColor: 'blue',
          '$MuiListItemText': {
            color: 'white',
          },
        },
      },
    },
})

It might be helpful to add more documentation regarding customization. The premium themes section gave me many ideas, but no clues as to how to do similar stuff.

material-ui version: beta 41

[oliviertassinari]

@Floriferous No, you can't do it with the overrides key of the theme. It might be time to start wrapping the Material-UI components to get them fit your expectations.

However, you can always push the theme approach it a bit further 🤔 :

const theme = createMuiTheme({
  overrides: {
    MuiListItem: {
      button: {
        '&:hover': {
          backgroundColor: 'blue',
          '& .whocares h3': {
            color: 'white',
          },
        },
      },
    },
  },
  props: {
    MuiListItemText: {
      className: 'whocares',
    },
  },
})

https://codesandbox.io/s/20wn844kwj