材质UI图标无法正确呈现

Question

很抱歉再次提出这个问题，但我无法一生都知道发生了什么。 我正在将我的React应用程序移动到一个有角度的应用程序中，并且除了材质用户界面/图标之外，其他所有功能都可以正常工作，它们只是看起来并不像它们应该的那样！

我正在使用最新的软件包，在index.html文件中有指向样式的链接，并且我相信我在正确使用图标。

import { Close } from '@material-ui/icons'

<Close />

这就是他们在我的应用程序上的样子。 不良图标图片

我没有任何与material-ui或Icons有关的控制台错误。

Answer 1

它应该是：

import Close from '@material-ui/icons/Close'

也尝试一下：

import Icon from '@material-ui/core/Icon';

<Icon>close</Icon>

Answer 2

如果您的环境不支持摇树，则建议的导入图标的方法如下：

import Close from '@material-ui/icons/Close';

如果您的环境支持摇树，您还可以通过以下方式导入图标：

import { Close } from '@material-ui/icons';

以这种方式导入命名的导出将导致项目中包含每个图标的代码，因此除非您配置树状摇动，否则不建议这样做。 如果启用它，也可能会影响热模块重载性能。

要启用摇树， 请点击我