How to solve Invalid Hook Call error when using Material UI?

Question

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

Answer 1

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

Answer 2

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'),
);