使用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组件中有多个菜单组件，则使用:global方法将为MyMenu中的所有Menu实例提供相同的背景。使用PaperProps方法时，只有带有PaperProps={{ className: styles.menuPaper }}的特定Menu才会应用样式。

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

MUI Menu文档：https://mui.com/api/menu/#props (另请参阅Popover组件)