title: Change Material-UI ListItem children on hover/active
body: <p>Consider the following component structure of a side-bar navigation:</p>
  <pre><code>&lt;ListItem button dense component={CustomNavLink} to=&quot;/dashboard&quot;&gt;
      &lt;ListItemIcon&gt;
          &lt;DashboardIcon /&gt;
      &lt;/ListItemIcon&gt;
      &lt;ListItemText primary=&quot;Dashboard&quot; /&gt;
  &lt;/ListItem&gt;
  </code></pre>
  <p>The task is to change the <code>ListItemIcon</code> and <code>ListItemText</code> appearance on hover or when the <code>CustomNavLink</code> becomes active.</p>
  <blockquote>
  <p>Note that <code>CustomNavLink</code> is an extended React Router's <code>NavLink</code> component
  that gets an <code>active</code> class applied to when it matches with the current route.</p>
  </blockquote>
  <p>The following, somewhat hacky way achieves that (abridged and simplified for clarity) via <code>classes</code> property:</p>
  <pre><code>const styles =  {
      root: {
          ...
          '&amp;.active, &amp;:hover, &amp;.active:hover': {
              '&amp; path': {
                  fill: 'red'
              },
              '&amp; span': {
                  color: 'red'
              }
          }
      }
  };
  </code></pre>
  <p>(<code>classes</code> are then applied to the <code>ListItem</code> component)</p>
  <p>This seems like an extremely lousy way of going about it, as the structure of the nested components leaks into the parent's styling... which is akin to doing this in the &quot;old&quot; CSS:</p>
  <pre><code>div:hover &gt; ul &gt; li &gt; a {
      color: red;
  }
  </code></pre>
  <p><strong>What is the idiomatic Material-UI way of solving this?</strong></p>
  <blockquote>
  <p>For reference, this is how it would be done in <code>styled-components</code>:</p>
  <pre><code>const CustomNavLink = styled(NavLink)`
      ...
      &amp;:hover {
          ${ListItemIcon} {
              path: {
                  fill: red;
              }
          }
  
          ${ListItemText} {
              color: red;
          }
      }
  `;
  </code></pre>
  </blockquote>