I am following these docs in order to style a material ui component (Paper) within a component (Menu) I am using.

I am using CSS modules to style my components (with Webpack as a bundler) :

// menu.js

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) => {
  ...
  return (
    <StyledEngineProvider injectFirst>
      <div id="my-menu">
        <Button id="button-react-component" onClick={handleClick}>
          My Menu
        </Button>
        <Menu
          id="menu-react-component"
          ...
          className={styles.menu}
        >
          <MenuItem ...>
            <span> Example 1 <span>
          </MenuItem>
        </Menu>
      </div>
  );
}

// styles.module.css

.menu {
  color: white;
}

.menu .MuiPaper-root {
  background-color: red
}

// Also tried : 
.menu .root {
  background-color: red
}

My goal is to have the MuiPaper component have a given background-color. MuiPaper is a component that comes from the Menu component, but I am not using MuiPaper directly as I am only declaring the parent (<Menu>).

Ideally I want to use .css files for styling. I use webpack to bundle my css files into modules.

Here's what I see in my browser :

Notice how the background-color "red" is not applied on that last screenshot.

Thanks :)