@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