使用 CSS 模块在父组件中设置 Mui 子组件的样式

Question

我正在关注these docs，以便在我正在使用的组件（菜单）中设置材质 ui 组件（纸张）的样式。

我正在使用 CSS 模块来设置我的组件的样式（使用 Webpack 作为捆绑器）：

// 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
}

我的目标是让MuiPaper 组件具有给定的背景颜色。 MuiPaper 是来自Menu 组件的组件，但我没有直接使用MuiPaper，因为我只是声明了父级（<Menu>）。

理想情况下，我想使用 .css 文件进行样式设置。我使用 webpack 将我的 css 文件捆绑到模块中。

这是我在浏览器中看到的内容：

注意背景色“红色”是如何没有应用到最后一个屏幕截图上的。

谢谢:)

Answer 1

CSS 模块不能覆盖来自另一个 CSS 模块（或其他地方）的样式。有几种方法可以解决这个问题：

1. 为.menu 论文添加另一个类，例如.menuPaper，并通过PaperProps 在Menu 组件上添加它：

.menuPaper {
  background-color: blue;
}

<Menu
  id="menu-react-component"
  ...
  className={styles.menu}
  PaperProps={{ className: styles.menuPaper }}
>

1. 将:global 选择器添加到您的css 选择器：

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

CSS 模块通过在 CSS 类名末尾添加唯一 ID 来“修改”CSS 类名。 :global 选择器可用于禁用此功能并保留类名。

这两种方法的区别在于，如果您的MyMenu 组件中有多个Menu 组件，则使用:global 方法将使MyMenu 内的所有Menu 实例具有相同的背景。使用 PaperProps 方法，只有特定的 Menus 和 PaperProps={{ className: styles.menuPaper }} 才能应用样式。

css-loaderdocs：https://github.com/webpack-contrib/css-loader#scope

MUI Menu 文档：https://mui.com/api/menu/#props（另见 Popover 组件）