MUI5：无法读取未定义的属性（读取“primary”）

Question

我正在使用带有reactjs的MUI5，我想使用makeStyles向MUI组件添加一些自定义CSS，但它不允许我在makestyles中使用默认主题，所以我的代码是：

import { Grid, Card, CardContent,Typography, CardActions,Button, AppBar, Toolbar, 
Box,IconButton, Menu, MenuItem, InputBase, alpha, styled, Badge, Container, CardHeader, 
CardMedia  } from '@mui/material';
import EmailIcon from '@mui/icons-material/Email';
import NotificationsIcon from '@mui/icons-material/Notifications';

import React from 'react' 

import { makeStyles } from '@mui/styles'
const useStyles = makeStyles((theme) => ({
  root: ({
    backgroundColor: theme.palette.primary.light,
    color: theme.color,
  }),
}));
const App = () => {
  const classes = useStyles();
  return(
    <Fragment>
      <Container className={classes.root}>
        <Typography>
          this is a very random text to fill
        </Typography>
      </Container>
    </Fragment>
  )
}

 export default App;

它不允许我访问 makestyle 中的主题道具

Answer 1

首先，尝试将“root”分配为普通对象属性，如下所示-

const useStyles = makeStyles((theme) => ({
  root: {
    backgroundColor: theme.palette.primary.light,
    color: theme.color,
  }
})); 

如果它不起作用，您可能想看看这个- https://mui.com/styles/basics/#using-the-theme-context

Answer 2

我有同样的问题，它指的是 mui 版本。我使用这些，现在我可以在 makeStyle() 中使用主题：

"@mui/icons-material": "^5.8.4",
"@mui/material": "^5.9.2",
"@mui/styled-engine": "npm:@mui/styled-engine-sc@latest",
"@mui/styled-engine-sc": "^5.8.0",
"@mui/styles": "^5.9.2",