时间戳

首页 > 解决方案 > 材质ui无法正确渲染

javascript - 材质ui无法正确渲染

问题描述

我是 react 新手，我正在使用 material-ui 来完成任务。

我遇到的问题是，即使根据material-ui 文档它应该可以工作，但图标不会显示：

每个文档

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/>）但我需要它从配置对象动态生成所以我不能使用它......

任何帮助或解释将不胜感激提前谢谢

标签： javascriptreactjsmaterial-ui

解决方案

您可能忘记在index.html文件中导入图标字体。您需要添加以下样式表：

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

这在文档中的字体图标部分中进行了解释。请注意，这HomeIcon是一个 SVG 图标并呈现svg元素而不是使用字体。

推荐阅读