javascript - @emotion injecting stylesheet into project with @material-ui v5, but CSS rule is not defined anywhere by myself

Question

I'm trying to add a simple menu component, and I copied and pasted the code from the docs.

It looks as expected in a CodeSandbox, however in my project, it looks like this:

My code is the same as in the docs,

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>
  );
}

I've noticed that if I add a className as,

const useStyles = makeStyles((theme) => ({
    menuItem: {
        padding: theme.spacing(2)
    }
}))
. . .
<MenuItem className={classes.menuItem} onClick={handleClose}>Profile</MenuItem>
. . .

Then nothing changes! That's odd. I changed up my useStyles by doing,

const useStyles = makeStyles((theme) => ({
    '&&': {
        menuItem: {
            padding: theme.spacing(2)
        }
    }
}))

And the changes took effect.

That's when I realized, something is injecting styles. I looked into my dev tools, and found this:

The class .css-10d1a0h-MuiButtonBase-root looks like an auto-generated class that is staged at the global level. I found it in elements,

Absolutely NO WHERE am I defining such a class. Where could it be coming from?

. . .
    "dependencies": {
        "@emotion/react": "^11.0.0",
        "@emotion/styled": "^11.0.0",
        "@material-ui/core": "5.0.0-alpha.23",
. . .

This github issue seemed to be related to my problem, but running npm ls @material-ui/core didn't list any packages and adding peerDependencies didn't help either.

question from:https://stackoverflow.com/questions/65941216/emotion-injecting-stylesheet-into-project-with-material-ui-v5-but-css-rule-is

Answer 1

I opened an issue on Github and they effectively told me to do the following for now, while they're migrating to @emotion:

import React from 'react';

import { useRoutes } from 'react-router-dom';

import { StylesProvider, ThemeProvider } from '@material-ui/core';

import routes from 'src/routes';
import { useCustomTheme } from 'src/hooks';

const App = React.memo(() => {
    const routing = useRoutes(routes({}));
    const theme = useCustomTheme();

    return (
        <StylesProvider injectFirst>
            <ThemeProvider theme={theme}>
                    {routing}
            </ThemeProvider>
        </StylesProvider>
    );
});

export default App;

. . .
    "dependencies": {
        "@emotion/react": "^11.0.0",
        "@emotion/styled": "^11.0.0",
        "@material-ui/core": "5.0.0-alpha.23",
. . .