0
339
ViewsHow to solve Invalid Hook Call error when using Material UI?
I'm new at coding and I'm having the following error when adding a MaterialUI Icon
import PersonIcon from '@mui/icons-material/Person';
function Header() {
return (
<div>
<PersonIcon />
<h2>Header file</h2>
</div>
);
}
export default Header;
When adding I get the following error:
Please notice that I have installed MaterialUI Core and also MaterialUI Icons When not adding everything works fine
·
Juan Pablo Isaza
2 answers
Answer question0
Try this
npm uninstall @material-ui/core @material-ui/icons
Then
npm i @material-ui/core @material-ui/icons
Restart the React server
npm start
// OR
yarn start
Let me know if it works, Good Luck
·
Juan Pablo Isaza
Report
0
You need to wrap your app in ThemeProvider:
index.js:
import * as React from 'react';
import ReactDOM from 'react-dom';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import App from './App';
const theme = createTheme({
palette: {
primary: {
main: '#556cd6',
},
secondary: {
main: '#19857b',
},
},
});
ReactDOM.render(
<ThemeProvider theme={theme}>
<App />
</ThemeProvider>,
document.querySelector('#root'),
);
·
Juan Pablo Isaza
Report
Answer question