您提供的功能在上下文中没有主题。父元素之一需要使用 ThemeProvider

Question

我正在项目中创建导航栏。在我的项目中我使用

• mui/图标材质：^5.2.5
• mui/材质：^5.2.6
• mui/样式：^5.2.3

现在我的文件夹结构是

• 根.jsx
  • 导航栏.jsx
  • styles.js

我的错误是

The `styles` argument provided is invalid. 
You are providing a function without a theme in the context. 
One of the parent elements needs to use a ThemeProvider.

我尝试用

修复

• 在 Root.jsx 添加 ThemeProvider
• 从 Root.jsx 中删除并添加到 Navbar.jsx
• 及其他

注意：我不了解Material UI。请帮助我摆脱这个错误。在这里我提供我的代码。

代码

• 代码

  Root.jsx

import React from 'react'
import Navbar from './Navbar'

const Root = () => {
    return (
        <>
            <Navbar />
        </>
 )}
export default Root

• 代码

  Navbar.jsx

import React from 'react'
import { AppBar, Menu, MenuItem, Toolbar, Typography, IconButton, Badge } from '@mui/material'
import { ShoppingCart } from '@mui/icons-material'
import useStyles from './styles'
import Logo from '../../images/logo.png'

const Navbar = () => {

    const classes = useStyles()

    return (
        <>
            <AppBar className={classes.appBar} position='fixed' color='inherit'>
                <Toolbar>
                    <Typography className={classes.title} variant='h6' color='inherit'>
                        <img className={classes.image} alt='Tech Cart' src={Logo} height='25px' />
                        Tech Cart
                    </Typography>
                    <div className={classes.grow} />
                    <div className={classes.button}>
                        <IconButton aria-label='Show cart products' color='inherit'>
                            <Badge badgeContent={2} color='secondary'>
                                <ShoppingCart />
                            </Badge>
                        </IconButton>
                    </div>
                </Toolbar>
            </AppBar>
        </>
    )
}
export default Navbar

• 代码

  style.js

import {
    makeStyles
} from '@mui/styles'
import {
    alpha
} from '@mui/material/styles'

const drawerWidth = 0;

export default makeStyles((theme) => ({
    appBar: {
        boxShadow: 'none',
        borderBottom: '1px solid rgba(0, 0, 0, 0.12)',
        [theme.breakpoints.up('sm')]: {
            width: `calc(100% - ${drawerWidth}px)`,
            marginLeft: drawerWidth,
        },
    },
    title: {
        flexGrow: 1,
        alignItems: 'center',
        display: 'flex',
        textDecoration: 'none',
    },
    image: {
        marginRight: '10px',
    },
    menuButton: {
        marginRight: theme.spacing(2),
        [theme.breakpoints.up('sm')]: {
            display: 'none',
        },
    },
    grow: {
        flexGrow: 1,
    },
    search: {
        position: 'relative',
        borderRadius: theme.shape.borderRadius,
        backgroundColor: alpha(theme.palette.common.white, 0.15),
        '&:hover': {
            backgroundColor: alpha(theme.palette.common.white, 0.25),
        },
        marginRight: theme.spacing(2),
        marginLeft: 0,
        width: '100%',
        [theme.breakpoints.up('sm')]: {
            width: 'auto',
        },
    },
    searchIcon: {
        padding: theme.spacing(0, 2),
        height: '100%',
        position: 'absolute',
        pointerEvents: 'none',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
    },
    inputRoot: {
        color: 'inherit',
    },
    inputInput: {
        padding: theme.spacing(1, 1, 1, 0),
        // vertical padding + font size from searchIcon
        paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
        transition: theme.transitions.create('width'),
        width: '100%',
        [theme.breakpoints.up('md')]: {
            width: '20ch',
        },
    },
}));

Answer 1

我也遇到了这个问题。以下是我解决问题所遵循的步骤：

1. 在将使用 mui 的组件中添加以下导入：

2. 接下来，创建一个主题。

3. 将组件包装在 Themeprovider 中并将主题传递给它：

Answer 2

在你的 Root 组件中尝试这个：

import React from 'react';
import Navbar from './Navbar';
import {createTheme} from '@mui/material';
import {ThemeProvider} from '@mui/styles';
const Root = () => {
const theme = createTheme()
    return (
        <ThemeProvider theme={theme}>
            <Navbar />
        </ThemeProvider>
 )}
export default Root

您可以在此链接中找到更多详细信息https://mui.com/material-ui/customization/theming/

Answer 3

您需要使用 mui 中的 createTheme 函数，https://mui.com/customization/theming/在这里您可以观看示例。 MakeStyles 用于设置特定组件的样式，而不是整个应用程序。

所以你需要做这样的事情：

const theme = createTheme({
  //here you set palette, typography ect...
})

然后你将整个应用程序包装在 ThemeProvider 中，如下所示......

<ThemeProvider theme={theme}>
  //Your application
</ThemeProvider>

然后，当您使用 makeStyles({theme}) 时，您的主题对象将具有您所描述的主题值。

Answer 4

我在MainLayout中编写了我的ThemeProvider，然后收到了这个错误消息，然后我将它放在Index组件中作为MainLayout的父级然后它已经解决了

Answer 5

为@MAHDI 的答案提供更多信息

这样做：

import { ThemeProvider, makeStyles } from '@mui/styles'
import { createTheme, createTheme } from '@mui/material'

在组件包装器中创建一个函数：

const useStyles = makeStyles(theme => ({
    ...... jsx/js style properties  .......
}));

 function App(){

      const theme = createTheme();

      return (
               <ThemeProvider theme={theme}>
                    .....  Your children components  ....
               </ThemeProvider>
      );
 }
    export default App;

Answer 6

那些将 MUI 从 v4 迁移到 v5 的人可能会遇到此错误。

更新您的导入，如下所示：

import { ThemeProvider, makeStyles } from '@mui/styles'
import { createTheme, createTheme } from '@mui/material'