I'm in the process of incorporating a simple menu component into my project, and I followed the instructions provided in the documentation.
When viewing it in a CodeSandbox, everything appears as expected. However, within my actual project, the menu looks like this: https://i.sstatic.net/GOOgv.png
Despite having identical code to the documentation,
import React from 'react';
import Button from '@material-ui/core/Button';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
export default function SimpleMenu() {
const [anchorEl, setAnchorEl] = React.useState(null);
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
return (
<div>
<Button aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
Open Menu
</Button>
<Menu
id="simple-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
>
<MenuItem onClick={handleClose}>Profile</MenuItem>
<MenuItem onClick={handleClose}>My account</MenuItem>
<MenuItem onClick={handleClose}>Logout</MenuItem>
</Menu>
</div>
);
}
After realizing that applying a className did not cause any changes,
const useStyles = makeStyles((theme) => ({
menuItem: {
padding: theme.spacing(2)
}
}))
. . .
<MenuItem className={classes.menuItem} onClick={handleClose}>Profile</MenuItem>
. . .
I decided to tweak my useStyles method:
const useStyles = makeStyles((theme) => ({
'&&': {
menuItem: {
padding: theme.spacing(2)
}
}
}))
Surprisingly, these updates had the desired effect.
This led me to the discovery that some styles were being injected externally. Through inspecting developer tools, I came across this:
https://i.sstatic.net/H8zoA.pngThe class .css-10d1a0h-MuiButtonBase-root seemed to be automatically generated and applied at a global level. It was visible within the elements section as well,
https://i.sstatic.net/LgsRW.png
I am puzzled as to where this class originates from, as I have not defined it anywhere in my project. Could it be coming from an external source?
. . .
"dependencies": {
"@emotion/react": "^11.0.0",
"@emotion/styled": "^11.0.0",
"@material-ui/core": "5.0.0-alpha.23",
. . .
A potential solution linked to a similar issue can be found on this GitHub page, however, running npm ls @material-ui/core did not list any relevant packages and even adding peerDependencies failed to resolve the problem.