title: How do you change a style of a child when hovering over a parent using MUI styles?
body: <p>I'm using MUI in react. Let's say I have this component with these styles:</p>
  <pre><code>const useStyles = makeStyles(theme =&gt; ({
    outerDiv: {
      backgroundColor: theme.palette.grey[200],
      padding: theme.spacing(4),
      '&amp;:hover': {
        cursor: 'pointer',
        backgroundColor: theme.palette.grey[100]
     }
    },
    addIcon: (props: { dragActive: boolean }) =&gt; ({
      height: 50,
      width: 50,
      color: theme.palette.grey[400],
      marginBottom: theme.spacing(2)
    })
  }));
  
  function App() {
    const classes = useStyles();
    return (
      &lt;Grid container&gt;
        &lt;Grid item className={classes.outerDiv}&gt;
          &lt;AddIcon className={classes.addIcon} /&gt;
        &lt;/Grid&gt;
      &lt;/Grid&gt;
    );
  }
  </code></pre>
  <p>I want to change the style of <code>addIcon</code> when hovering over <code>outerDiv</code> using the styles above.</p>
  <p><a href="https://codesandbox.io/s/trusting-mcnulty-b1gcd?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="noreferrer">Here</a>'s my example.</p>