如何使用CSS Modules为MUI父组件Menu内的子组件Paper设置样式

你的样式不生效核心原因是 Menu 组件内部的 Paper 元素是通过 Popper 组件默认挂载到 document.body 节点下的，和你添加了 styles.menu 类名的 Menu 组件根 DOM 节点不存在父子嵌套关系，你写的 .menu .MuiPaper-root 后代选择器无法匹配到目标元素。

方案1：通过 Menu 暴露的 PaperProps 直接传递样式类（最推荐） #

Menu 组件官方提供了 PaperProps 属性，可直接把自定义类名传给内部渲染的 Paper 组件，无需用后代选择器。
修改代码如下：

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}
          // 新增PaperProps配置，给内部Paper传自定义类名
          PaperProps={{
            className: styles.menuPaper
          }}
        >
          <MenuItem ...>
            <span> Example 1 <span>
          </MenuItem>
        </Menu>
      </div>
  );
}

styles.module.css 修改部分 #

.menu {
  color: white;
}

/* 直接定义Paper的样式即可 */
.menuPaper {
  background-color: red;
}

方案2：修改 Popper 挂载容器，让后代选择器生效 #

如果你坚持要用后代选择器的写法，可以修改 Menu 内部 Popper 的挂载节点，把它挂载到你当前组件的 DOM 节点内，让嵌套结构符合选择器要求：

menu.js 修改部分 #

const MyMenu = (props) => {
  // 新增ref绑定当前组件的容器元素
  const containerRef = React.useRef(null);
  ...
  return (
    <StyledEngineProvider injectFirst>
      {/* 给外层div绑定ref */}
      <div id="my-menu" ref={containerRef}>
        <Button id="button-react-component" onClick={handleClick}>
          My Menu
        </Button>
        <Menu
          id="menu-react-component"
          ...
          className={styles.menu}
          // 新增container配置，指定Popper挂载节点
          container={containerRef.current}
        >
          <MenuItem ...>
            <span> Example 1 <span>
          </MenuItem>
        </Menu>
      </div>
  );
}

修改后你原来写的 .menu .MuiPaper-root 选择器就可以正常匹配到元素，如果遇到样式优先级不够的问题，可以给样式添加 !important 临时提升优先级。

内容的提问来源于stack exchange，提问作者Rose