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

【问题标题】：Material UI components not working in React JS projectMaterial UI 组件在 React JS 项目中不起作用
【发布时间】：2022-10-31 12:18:50
【问题描述】：

这是我的 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;

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

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

请帮我克服这个错误

【问题讨论】：

共享您安装了依赖项的 package.json 文件代码。？
我认为您需要重写并且导出默认类 App 之间的功能扩展了 React.Component {}。我希望它可以帮助
{“依赖”：{“@emotion/react”：“^11.9.3”，“@emotion/styled”：“^11.9.3”，“@mui/material”：“^5.8.6”}}
嗨，这个 App 组件似乎没有问题。你在其他组件中调用任何钩子吗？问题似乎是您在组件主体之外调用了一个钩子。所以你看不到任何东西的原因是因为你的钩子调用中的问题它没有渲染任何东西。

标签： javascript reactjs material-ui web-development-server

【解决方案1】：

也许像示例中那样导入按钮可能会有所帮助？试试import Button from '@mui/material/Button';

【讨论】：

还是行不通

【解决方案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>
  );
}

我希望它会有所帮助。

【讨论】：

【解决方案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

【讨论】：