我是 React 新手,我正在使用 Material-ui 来完成工作。
我遇到的问题是图标没有显示,即使按照material-ui docs它应该有效:
每个文档
import Icon from '@material-ui/core/Icon';
...
<Icon className={classes.icon} color="action">
add_circle
</Icon>
我正在尝试使用以下方式获取导航项目:
import React from 'react';
import { NavLink } from 'react-router-dom'
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Icon from '@material-ui/core/Icon';
import InboxIcon from '@material-ui/icons/Inbox';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import _ from 'lodash';
const SideMenuItems = ({ menuItems }) => {
return _.map( menuItems ,( menuItem )=>{
const { text, link, icon } = menuItem;
return (
<NavLink to={link} key={link}>
<ListItem>
<ListItemIcon>
<Icon>add_circle</Icon>
</ListItemIcon>
<ListItemText inset primary={text} />
</ListItem>
</NavLink>
);
});
};
一切都呈现良好,但图标仅呈现文本。我已经尝试过声明显式图标并且它有效(例如 <HomeIcon/>
),但我需要它从配置对象动态生成,所以我不能使用它...
任何帮助或解释将不胜感激 提前致谢
最佳答案
您可能忘记在 index.html
文件中导入图标字体。您需要添加以下样式表:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
这在Font Icons部分中有解释。在文档中。请注意,HomeIcon
是一个 SVG 图标,并呈现 svg
元素,而不是使用字体。
关于javascript - Material ui <Icon> 无法正确渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51544793/