admin管理员组

文章数量:1221774

I am creating a Navbar in a Project. In my Project I use

  • mui/icons-material: ^5.2.5
  • mui/material: ^5.2.6
  • mui/styles: ^5.2.3
Now My folder structure is
  • Root.jsx
    • Navbar.jsx
    • styles.js
I am having an error of
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.
I have tried to fix with
  • Add ThemeProvider at Root.jsx
  • Remove from Root.jsx & Add at Navbar.jsx
  • & Others

Note: I don't know Material UI. Please help me to get out from this error. Here I am providing my code.

Code
  • Code of Root.jsx
import React from 'react'
import Navbar from './Navbar'

const Root = () => {
    return (
        <>
            <Navbar />
        </>
 )}
export default Root
  • Code of 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
  • Code of 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.palettemon.white, 0.15),
        '&:hover': {
            backgroundColor: alpha(theme.palettemon.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',
        },
    },
}));

I am creating a Navbar in a Project. In my Project I use

  • mui/icons-material: ^5.2.5
  • mui/material: ^5.2.6
  • mui/styles: ^5.2.3
Now My folder structure is
  • Root.jsx
    • Navbar.jsx
    • styles.js
I am having an error of
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.
I have tried to fix with
  • Add ThemeProvider at Root.jsx
  • Remove from Root.jsx & Add at Navbar.jsx
  • & Others

Note: I don't know Material UI. Please help me to get out from this error. Here I am providing my code.

Code
  • Code of Root.jsx
import React from 'react'
import Navbar from './Navbar'

const Root = () => {
    return (
        <>
            <Navbar />
        </>
 )}
export default Root
  • Code of 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
  • Code of 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',
        },
    },
}));
  • javascript
  • reactjs
  • material-ui
  • material-design
Share Improve this question asked Dec 29, 2021 at 16:14 mrhrifatmrhrifat 2011 gold badge3 silver badges10 bronze badges 4
  • try this: import {useStyles} from './styles' – yanir midler Commented Dec 29, 2021 at 16:17
  • I already do it at Navbar.jsx @yanirmidler – mrhrifat Commented Dec 29, 2021 at 16:18
  • yes but you didnt put it in { } – yanir midler Commented Dec 29, 2021 at 16:19
  • After it, I am having Uncaught TypeError: (0 , _styles__WEBPACK_IMPORTED_MODULE_1__.useStyles) is not a function – mrhrifat Commented Dec 29, 2021 at 16:20
Add a comment  | 

6 Answers 6

Reset to default 5

I also ran into this issue. These are the steps I followed to solve the issue:

  1. Add following import in the component that will use mui: import

  2. Next, create a theme. createTheme

  3. Wrap the component within Themeprovider and pass the theme to it: themeprovider

try this in your Root component:

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

you can find more details in this link https://mui.com/material-ui/customization/theming/

You need to use createTheme function from mui, https://mui.com/customization/theming/ Here you can watch examples. MakeStyles is used to style a specific component, but not the whole application.

so you need to do something like this:

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

Then you wrap your whole application in ThemeProvider like this...

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

and then, when you use makeStyles({theme}) your theme object will have your described theme values.

I wrote my ThemeProvider in the MainLayout and then received this error message, then i took it in Index component as the parent of the MainLayout then it has been solved

To throw more light to @MAHDI's Answer

Do this:

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

Create a function within your component wrapper:

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

 function App(){

      const theme = createTheme();

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

Those who are migrating MUI from v4 to v5, they might face this error.

Update your imports as shown below:

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

本文标签：

版权声明：本文标题：javascript - You are providing a function without a theme in the context. One of the parent elements needs to use a ThemeProvide 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1739330252a2158445.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。