使用纯 CSS 为父组件中的 Mui 子组件设置样式

Question

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

I have :

// menu.js

import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import styles from './styles.css'

const MyMenu = (props) => {
  ...
  return (
      <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.css

.menu {
  color: white;
}

.menu .MuiPaper-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.

Here's what I see in my browser :

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

Thanks :)

Answer 1

Your issue is in this part of your code:

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

You should not be using className={styles.menu} , but rather className="menu" . This is reflected in the docs near the top in the "Plain CSS" section.

The {styles.menu} type syntax is only used in the CSS Modules implementation, in this section of the docs: https://mui.com/guides/interoperability/#heading-css-modules because webpack is handling the CSS injection.