For the styling of a Material UI component (Paper) within a Menu component, I am referencing this documentation.
To style my components using CSS modules with Webpack as the bundler, here's an example:
// 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
}
The objective is to apply a specific background-color to the MuiPaper component. MuiPaper is nested within the Menu component, and its styling is defined through the parent declaration.<Menu>.
I prefer utilizing .css files for styling purposes and utilize webpack to bundle these css files into modules.
Observations in the browser : https://i.sstatic.net/Dja6H.png
https://i.sstatic.net/qMUMp.png
It can be seen that the background-color "red" is not reflecting in the last screenshot.
Appreciate your assistance :)