在 material-ui/icons 中找不到 MenuIcon

Question

我正在尝试使用 Material UI 创建一个基本的导航栏。Material-UI 文档站点https://material-ui.com/components/app-bar/上的样板模板在浏览器中返回以下错误：

“尝试导入错误：‘@material-ui/icons’不包含默认导出（导入为“MenuIcon”）。”

我已经使用 npm 安装了 @material-ui/core 和 @material-ui/icons。参见 package.json：

{
  "name": "profile_v4",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.11.2",
    "@material-ui/icons": "^4.11.2",
    "@testing-library/jest-dom": "^5.11.8",
    "@testing-library/react": "^11.2.2",
    "@testing-library/user-event": "^12.6.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  },

我的 Navbar.js 组件文件：

import React from 'react'
import { AppBar, Toolbar, IconButton, Typography, Button } from '@material-ui/core';
import MenuIcon from "@material-ui/icons";

const Navbar = () => {
    return (
        <AppBar position="static">
        <Toolbar>
          <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" className={classes.title}>
            News
          </Typography>
          <Button color="inherit">Login</Button>
        </Toolbar>
      </AppBar>
    )
}

export default Navbar;

我已经在 SO 上的其他地方寻找解决方案，但所有答案都是“您尚未安装 npm material-ui/icons 包”的变体，所以我希望有人能告诉我我错过了什么。提前致谢！

Answer 1

问题在于您如何导入图标。您可以通过更改为命名导入或提供图标的完整路径来修复它。

import MenuIcon from "@material-ui/icons/Menu";
import { Menu as MenuIcon } from "@material-ui/icons";