Material UI 组件在 React JS 项目中不起作用

Question

这是我的 app.js 代码：

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;

它应该显示所需的按钮，但有一个空白屏幕

而且控制台日志中也有错误

请帮助我克服这个错误

Answer 1

也许像示例中那样导入按钮可能会有所帮助？ 尝试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>
  );
}

我希望它会有所帮助。

Answer 3

请使用此命令。

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

Github 问题： https://github.com/mui/material-ui/issues/32074

Answer 4

错误不在您显示的代码中。

错误来自 Button 组件，在第 224 行检查它。

我很确定你从错误的地方调用了一个钩子，但是因为你没有提供代码，我无法告诉你如何解决它。

您可以这样做：注释掉您在按钮组件中所做的钩子调用。

之后网站应该呈现。

然后您可以以此为起点进行更正。

您需要做的只是更改调用钩子的位置。

确保它们是从功能组件的主体内部调用的

像这样：

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.

在这里您可以了解更多相关信息：官方文档和教程； - 初学者友好！ ;)