title: Style Mui child component within parent component using CSS modules
body: <p>I am following <a href="https://mui.com/guides/interoperability/#css-modules" rel="nofollow noreferrer">these docs</a> in order to style a material ui component (Paper) within a component (Menu) I am using.</p>
  <p>I am using CSS modules to style my components (with Webpack as a bundler) :</p>
  <p>// menu.js</p>
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  import { StyledEngineProvider } from '@mui/material/styles';
  ...
  import styles from './styles.module.css';
  import Menu from '@mui/material/Menu';
  import MenuItem from '@mui/material/MenuItem';
  
  
  const MyMenu = (props) =&gt; {
    ...
    return (
      &lt;StyledEngineProvider injectFirst&gt;
        &lt;div id=&quot;my-menu&quot;&gt;
          &lt;Button id=&quot;button-react-component&quot; onClick={handleClick}&gt;
            My Menu
          &lt;/Button&gt;
          &lt;Menu
            id=&quot;menu-react-component&quot;
            ...
            className={styles.menu}
          &gt;
            &lt;MenuItem ...&gt;
              &lt;span&gt; Example 1 &lt;span&gt;
            &lt;/MenuItem&gt;
          &lt;/Menu&gt;
        &lt;/div&gt;
    );
  }
  </code></pre>
  <p>// styles.module.css</p>
  <pre class="lang-css prettyprint-override"><code>
  .menu {
    color: white;
  }
  
  .menu .MuiPaper-root {
    background-color: red
  }
  
  // Also tried : 
  .menu .root {
    background-color: red
  }
  </code></pre>
  <p>My goal is to have the <code>MuiPaper</code> component have a given background-color. <code>MuiPaper</code> is a component that comes from the <code>Menu</code> component, but I am not using <code>MuiPaper</code> directly as I am only declaring the parent (<code>&lt;Menu&gt;</code>).</p>
  <p>Ideally I want to use <code>.css</code> files for styling. I use webpack to bundle my css files into modules.</p>
  <p>Here's what I see in my browser :
  <a href="https://i.stack.imgur.com/Dja6H.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Dja6H.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/qMUMp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qMUMp.png" alt="enter image description here" /></a></p>
  <p>Notice how the background-color &quot;red&quot; is not applied on that last screenshot.</p>
  <p>Thanks :)</p>