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

Question

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

我正在尝试从材质图标导入“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’”

哪里有问题？

Answer 1

FileDownload图标是v5中添加的，v4中没有。您可以在此处搜索 v4 图标。要在旧版本的 MUI 中使用 v5 图标，只需复制此处的源代码即可：

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

如果您已经使用 Material UI v5，则意味着您缺少图标包。请按照此处的安装指南进行安装：

npm install @mui/icons-material

Answer 2

npm install @mui/icons-material

（或者）

npm install -g @material-ui/icons

Answer 3

按照此链接使用从 v4 到 v5 的迁移https://mui.com/guides/migration-v4/

你可以做：

// with npm
npm install @mui/icons-material

或这个 ：

1. npm install @mui/material @mui/styles
2. npm install @emotion/react @emotion/styled

Answer 4

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

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

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

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