Material-ui 图标创建空白屏幕答案

【问题标题】：Material-ui icons create blank screenMaterial-ui 图标创建空白屏幕
【发布时间】：2022-01-25 12:08:15
【问题描述】：

我反复安装material-ui和material-ui图标，但每次尝试使用material-ui图标时，都会出现黑屏以及很多错误。

Header.js

import React from 'react'
import "./Header.css"
import PersonIcon from '@mui/icons-material/Person';

function Header() {
    return (
        <div className="header">
            <h1 className="header_important">header</h1>
            <PersonIcon />
        </div>
    )
}

export default Header

错误信息：

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    React 2
    node_modules bundle.js:50231
    React 17
    js index.js:7
    factory react refresh:6
    Webpack 3
react.development.js:1476

The above error occurred in the <MuiSvgIconRoot> component:

../../../node_modules/@emotion/react/dist/emotion-element-699e6908.browser.esm.js/withEmotionCache/<@http://localhost:3000/static/js/bundle.js:50231:66
SvgIcon@http://localhost:3000/static/js/bundle.js:1166:82
PersonIcon
div
Header
div
App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries. react-dom.development.js:20085

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    React 2
    node_modules bundle.js:50231
    React 17
    js index.js:7
    factory react refresh:6
    Webpack 3
react.development.js:1476
    React 2
    withEmotionCache emotion-element-699e6908.browser.esm.js:34
    React 17
    js index.js:7
    factory react refresh:6
    Webpack 3

屏幕只是白色的。如果我从 Header.js 中删除 <PersonIcon />，它会呈现正常并且不会出现错误。

编辑：Package.json 文件：

{
  "name": "tinder-clone",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.12.3",
    "@mui/core": "^5.0.0-alpha.54",
    "@mui/icons-material": "^5.2.5",
    "@mui/material": "^5.2.5",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^12.0.0",
    "@testing-library/user-event": "^13.2.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

【问题讨论】：

你能分享你的 package.json 文件吗？我只是对您使用的软件包版本感到好奇。或者是否可以通过重现这个问题来创建一个CodeSandBox项目？
我添加了 package.json 文件。
尝试将function Header() { ... }更改为const Header = () => { ... }

标签： reactjs material-ui icons

【解决方案1】：

我认为这是因为您同时使用 Material UI V4 和 V5 卸载所有这些包

   "@material-ui/core": "^4.12.3",
    "@mui/core": "^5.0.0-alpha.54",
    "@mui/icons-material": "^5.2.5",
    "@mui/material": "^5.2.5",

并重新安装 Material V5（因为您使用的是 React 17.02）
然后安装

npm install @mui/material @emotion/react @emotion/styled
npm install @mui/icons-material

【讨论】：