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.

在這里您可以了解更多相關信息：官方文檔和教程； - 初學者友好！ ;)