MUI5 :无法读取未定义的属性(读取“主”)

Question

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

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;

它不允许我进入主题道具里面的造型机

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。