我更新到最新版本，收到以下错误消息：TypeError: Cannot read properties of undefined (reading 'breakpoints')
package.json:
"@emotion/react": "^11.8.1",
"@emotion/styled": "^11.8.1",
"@mui/icons-material": "^5.4.4",
"@mui/material": "^5.4.4",
"@mui/styles": "^5.4.4",
"react": "^17.0.2",
"react-dom": "^16.13.1",
代码：
import {
createTheme,
useTheme,
ThemeProvider,
} from "@mui/material";
import { makeStyles } from '@mui/styles';
....
const useStyles = makeStyles((theme) => ({
root: {
display: "flex"
},
drawer: {
[theme.breakpoints.up("lg")]: {
width: drawerWidth,
flexShrink: 0
}
},
appBar: {
[theme.breakpoints.up("lg")]: {
width: `calc(100% - ${drawerWidth}px)`,
marginLeft: drawerWidth
}
},
menuButton: {
marginRight: theme.spacing(2),
[theme.breakpoints.up("lg")]: {
display: "none"
},
backgroundColor: darkState ? grey[900] : blue[500]
},
// necessary for content to be below app bar
toolbar: theme.mixins.toolbar,
drawerPaper: {
width: drawerWidth,
color: "#ffffff",
backgroundColor: darkState ? grey[900] : blue[500]
},
content: {
flexGrow: 1,
padding: theme.spacing(3)
}
}));
const classes = useStyles();
const theme = useTheme();
...
return (
<ThemeProvider theme={darkTheme}>
<div className={classes.root}>
....
</div>
</ThemeProvider>
);
示例：Codesandox
将ThemeProvider放入上部组件