Material UI components not working in React JS project

Question

this is my app.js code:

import React from "react";
import './App.css';
import {Button} from "@mui/material";
function App() {
  return (
    <div className="App">
      <h1>COVID-19 TRACKER</h1>
      <Button variant="outlined">Text</Button>
    </div>
  );
}

export default App;

it should display desired button but instead there is a blank screen

And also there is an error in console log

Kindly help me overcome this error

Answer 1

Maybe importing button like in examples might help? Try import Button from '@mui/material/Button';

Answer 2

import React from "react";
import './App.css';
import {Button} from "@mui/material";

export default class App extends React.Component {
  
  return (
    <div className="App">
      <h1>COVID-19 TRACKER</h1>
      <Button variant="outlined">Text</Button>
    </div>
  );
}

I hope it may help.

Answer 3

Please use this command.

npm install @mui/material @emotion/react @emotion/styled --legacy-peer-deps
npm install @mui/icons-material --legacy-peer-deps

Github Issue: https://github.com/mui/material-ui/issues/32074

Answer 4

The error is not in the code what you are showing.

The error comes from the Button component , check it on line 224.

Im pretty sure what you are calling a hook from the wrong place , but because you did not provided the code, I can't show you exactly how to solve it.

You can do this: comment out the hook calls what you are making in the button component.

After that the site should render.

Then you can use that as a start point to make corrections.

What you need to do is simply change the place from where you are calling the hook/hooks.

Make sure what they are call from inside the body of a functional component

like this:

const Button = () => {
    // >>>>>>>> here you can call hooks for example:
    const [exampleValue, setExampleValue] = useState("initial value");


    return (
        <div>
            <button>Im a button</button>
        </div>
    );
} 



// if you are using the classes syntax you have to use the constructor instead with this.state and maybe lifecycle methods.

Here you can learn more about it: official docs and tutorials ; - begginer friendly! ;)