title: Material-UI Theme Overrides: How To Override Children Styles Globally?
body: <p>I'm building an app with the <a href="https://material-ui.com/" rel="nofollow noreferrer">Material-UI library</a> for ReactJS. Using the <a href="https://material-ui.com/customization/overrides/#global-theme-override" rel="nofollow noreferrer">Theme Overrides API</a>, I'm trying to figure out how I can globally style a component, but only when it is a child of another specific component.</p>
  
  <p>For example, I'm trying to set the background/text coloring of <code>MenuItem</code>s inside a <code>&lt;Select&gt;</code> menu, where each <code>&lt;MenuItem&gt;</code> contains a <code>&lt;listItemText&gt;</code>. Here's my component:</p>
  
  <pre><code>import { MenuItem, Select, ListItemText } from '@material-ui/core';
  import { MuiThemeProvider } from '@material-ui/core/styles';
  import * as React from 'react';
  import theme from './theme';
  
  const MySelect = props =&gt; {
      return (
          &lt;MuiThemeProvider theme={theme}&gt;
              &lt;Select variant="standard" value="2" open&gt;
                  &lt;MenuItem value="1"&gt;
                      &lt;ListItemText&gt;One&lt;/ListItemText&gt;
                  &lt;/MenuItem&gt;
                  &lt;MenuItem value="2"&gt;
                      &lt;ListItemText&gt;Two&lt;/ListItemText&gt;
                  &lt;/MenuItem&gt;
                  &lt;MenuItem value="3"&gt;
                      &lt;ListItemText&gt;Three&lt;/ListItemText&gt;
                  &lt;/MenuItem&gt;
                  &lt;MenuItem value="4"&gt;
                      &lt;ListItemText&gt;Four&lt;/ListItemText&gt;
                  &lt;/MenuItem&gt;
              &lt;/Select&gt;
          &lt;/MuiThemeProvider&gt;
      );
  };
  
  export default MySelect;
  </code></pre>
  
  <p>Unfortunately, applying a color to the <code>&lt;MenuItem&gt;</code> directly doesn't work because the <code>&lt;ListItemText&gt;</code> overrides it with a <code>&lt;Typography&gt;</code> that has its own coloring set. This is fine for a non-hovered, non-selected state, but if I style the "selected" <code>MenuItem</code> to have a darker background, I need it to have a lighter text.</p>
  
  <p><a href="https://i.stack.imgur.com/bPHxx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bPHxx.png" alt="MUI select dropdown with darkened selected item and dark text"></a></p>
  
  <p>Here is my theme file:</p>
  
  <pre><code>import { createMuiTheme, createStyles } from '@material-ui/core';
  
  const myTheme = createMuiTheme({
      overrides: {
          MuiMenuItem: createStyles({
              root: {
                  '&amp;&amp;:hover': {
                      backgroundColor: 'pink',
                      color: 'white'
                  }
              },
              selected: {
                  '&amp;&amp;': {
                      backgroundColor: 'blue',
                      color: 'white'
                  },
                  '&amp;&amp;:hover': {
                      backgroundColor: 'darkblue',
                      color: 'white'
                  }
              }
          }),
  
          // How do I enforce this ONLY inside of MuiMenuItem and only for
          // the selected variant of that?
          MuiTypography: {
              subheading: {
                  color: 'white'
              }
          }
      }
  });
  
  export default myTheme;
  </code></pre>
  
  <p>So, my question is: is there a way to do this using just Theme Overrides? Or do I need to conditionally pass this styling into the <code>&lt;ListItemText&gt;</code> component using props? Since most of the styling here fits nicely into Theme Overrides, that seems like a nicer way to do it, but maybe I'm misusing the API.</p>
  
  <p>For a working demo of my above code, see: <a href="https://codesandbox.io/s/3r9mkxq231" rel="nofollow noreferrer">https://codesandbox.io/s/3r9mkxq231</a></p>
  
  <p>Any insight is welcome! Thank you!</p>