时间戳

首页 > 解决方案 > 使用 CSS 模块在父组件中设置 Mui 子组件的样式

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

问题描述

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

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

// 菜单.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>
  );
}

// 样式.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 文件捆绑到模块中。

这是我在浏览器中看到的内容： 在此处输入图像描述

在此处输入图像描述

请注意背景颜色“红色”如何未应用于最后一个屏幕截图。

谢谢 ：）

标签： javascriptcssreactjsmaterial-uistyling

解决方案

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

  1. 专门为.menu论文添加另一个类，例如，并通过在组件上.menuPaper添加它：PaperPropsMenu
.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器可用于禁用此功能并保留类名。

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

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

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

推荐阅读