MUI：提供的 `styles` 参数无效。您提供的功能在上下文中没有主题

Question

当我尝试在导航栏中添加断点时出现以下错误。我在这里看到了类似的问题，但我无法解决这个问题。
Navbar.js

import { AppBar, Toolbar, Typography } from '@mui/material';
import { makeStyles } from '@mui/styles';
import React from 'react';

const useStyles = makeStyles((theme) => ({
 logoLg: {
    display: 'none',
    [theme.breakpoints.up('sm')]: {
        display: 'block',
    }
 },
 logoSm: {
    display: 'block',
    [theme.breakpoints.up('sm')]: {
        display: 'none',
    }
 }
}));

function NavBar() {
const classes = useStyles();
return (
    <AppBar>
        <Toolbar>
            <Typography variant='h6' className={classes.logoLg}>
                Demo Page
            </Typography>
            <Typography variant='h6' className={classes.logoSm}>
                DEMO
            </Typography>
        </Toolbar>
    </AppBar>
 )
}

export default NavBar;

包

"@emotion/styled": "^11.8.1",
"@mui/icons-material": "^5.5.0",
"@mui/material": "^5.5.0",
"@mui/styles": "^5.5.0",

提前致谢。

Answer 1

我刚刚在我的本地项目中测试了它。从“@material-ui/styles”导入时，我发现了同样的错误。当我从核心包导入它时 Ant 它工作。

从“@material-ui/core”导入{makeStyles}；

“@material-ui/styles”中的 useTheme 函数不是 return 默认主题。我认为这是根本原因。

我只是在 material-ui v4 中测试它。不确定它在 MUI v5 中是否也正确。

错误发生是因为 MUI 从 useTheme 中获取了一个空主题。所以你应该给它一个有价值的主题，也许是 themeProvider。

MUI：提供的 `styles` 参数无效。您提供的功能在上下文中没有主题

MUI: The `styles` argument provided is invalid. You are providing a function without a theme in the context

reactjs

material-ui