找不到模块：无法解析"@mui/图标材料/文件下载"

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>

但是出现这样的错误"模块未找到:无法解析'@mui/icons-material/FileDownload' in 'E:frontendsrccomponentDetails'">

谁能告诉我问题在哪里?

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

您似乎正在使用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>

Answer 4

使用以下链接从v4迁移到v5 https://mui.com/guides/migration-v4/

你可以:

//使用NPMNPM install @mui/icons-material

或this:

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

Answer 5

您需要安装- @mui，但是您已经安装了material-ui。

但我面临的问题，如果你可以帮助，然后检查下面两个链接。

1. 我已经强制安装了mui.
2. 结果是获取模块未找到错误

Answer 6

在继续之前，通过运行以下命令npm install @mui/icons-material(material ui version 5)和npm install @material-ui/icons(version 4)来确保您已经安装了@material-ui/icons:

如果你使用的是React Material UI版本5，像这样导入所需的图标:

import FileDownloadIcon from '@mui/icons-material/FileDownload';

如果你在使用React Material UI版本4时遇到无法解决的问题，并且你已经使用第一种方法导入了它，请按照以下步骤解决问题:

而不是导入图标为:

import FileDownloadIcon from '@mui/icons-material/FileDownload';

你应该像这样导入它:

import CheckCircleIcon from "@material-ui/icons/FileDownload";