找不到模块：无法解析“@mui/icons-material/FileDownload”答案

【问题标题】：Module not found: Can't resolve '@mui/icons-material/FileDownload'找不到模块：无法解析“@mui/icons-material/FileDownload”
【发布时间】：2021-12-10 23:09:38
【问题描述】：

我已经安装了@material-ui/core 和@material-ui/icons。

我正在尝试从 Material 图标导入 "FileDownloadIcon"。

安装“@material-ui/core”：

npm i @material-ui/core

安装“@material-ui/icons”：

npm i @material-ui/icons

这是我尝试导入的方式“FileDownloadIcon”：

import FileDownloadIcon from '@mui/icons-material/FileDownload';
<div className="download-file">
        <Button
                variant="contained"
                color="primary"
                onClick={() => getResume()}
            >
            <FileDownloadIcon />
            Download Resume
        </Button>
</div>

但它正在发生这样的错误 “找不到模块：无法解析 'E:\frontend\src\component\Details' 中的 '@mui/icons-material/FileDownload'”

谁能告诉我问题出在哪里？

【问题讨论】：

我觉得你需要安装@mui/material
您似乎对使用 Material-ui v5 和 v4 感到困惑。您安装了 v4 图标并尝试导入 v5 图标。

标签： javascript reactjs material-ui

【解决方案1】：

FileDownload 图标是在 v5 中添加的，在 v4 中不存在。您可以搜索 v4 图标here。要在旧版 MUI 中使用 v5 图标，只需复制源代码here：

function FileDownload(props) {
  return (
    <SvgIcon {...props}>
      <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z" />
    </SvgIcon>
  );
}

编辑：如果您已经在使用 MUI v5，这意味着您缺少图标包。按照安装指南here进行安装：

npm install @mui/icons-material

【讨论】：

【解决方案2】：

您似乎正在使用 v5 的 Material-UI。使用以下内容：

import { FileDownload } from "@mui/icons-material";

注意图标的名称，省略Icon。然后与按钮一起使用：

<div className="download-file">
  <Button
    variant="contained"
    color="primary"
    onClick={() => getResume()}
    startIcon={<FileDownload />}>
     Download Resume
  </Button>
</div>

【讨论】：