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

Question

我正在尝试制作一个侧边栏组件并导入不同的图标来制作 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";

所有图标都以此类推。

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

Answer 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