@material-ui 图标未显示在屏幕上

Posted 2023-03-15

【中文标题】@material-ui 图标未显示在屏幕上

【英文标题】：@material-ui icons not displaying on the screen

【发布时间】：2021-12-06 19:06:51

【问题描述】：

我正在尝试制作一个侧边栏组件并导入不同的图标来制作 UI，但它们没有呈现在屏幕上。我尝试了这里提到的其他解决方案，但效果不佳。

<SidebarOption Icon = InsertCommentIcon title ="Threads"/>
<SidebarOption Icon = InboxIcon title ="Mentions & Reactions"/>
<SidebarOption Icon = DraftsIcon title ="Saved items"/>
<SidebarOption Icon = BookmarkBorderIcon title ="Channel browser"/>
<SidebarOption Icon = PeopleAltIcon title ="People & user groups"/>
<SidebarOption Icon = AppsIcon title ="Apps"/>
<SidebarOption Icon = FileCopyIcon title ="File browser"/>
<SidebarOption Icon = ExpandLessIcon title ="Show less"/>
<SidebarOption Icon = ExpandMoreIcon title ="Show more"/>

照常导入

import InsertCommentIcon from "@material-ui/icons/InsertComment";
import DraftsIcon from "@material-ui/icons/Drafts";
import InboxIcon from "@material-ui/icons/Inbox";

所有图标都以此类推。

但图标在侧边栏上不可见。您认为可能是什么问题，我应该解决什么问题？

【问题讨论】：

你能告诉我SidebarOption的定义吗？

pastebin.com/8kB2vWyz 就是这样。请看一下

nvm，它起作用了，只需要删除侧边栏中的 display:flex 。无论如何谢谢:)

【参考方案1】：

你的导入错误，试试这些

import InsertCommentIcon from '@mui/icons-material/InsertComment';
import DraftsIcon from '@mui/icons-material/Drafts';
import InboxIcon from '@mui/icons-material/Inbox';

等等……

另外，请确保您安装了 MUI 和正确的图标：

npm install @mui/material

和

npm install @mui/icons-material

【讨论】：

导入路径是对的，只是因为他们使用的是v4并不意味着代码停止工作。

导入工作正常。当我在玩我的代码时，我发现问题是图标显示在侧边栏组件之外。