我正在使用带有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 中的主题道具
首先,尝试将“root”分配为普通对象属性,如下所示-
const useStyles = makeStyles((theme) => ({
root: {
backgroundColor: theme.palette.primary.light,
color: theme.color,
}
}));
如果它不起作用,您可能想看看这个- https://mui.com/styles/basics/#using-the-theme-context
我有同样的问题,它指的是 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",