无法使用 Material UI 图标

Question

我正在尝试使用 Material ui 图标，但是当我添加图标组件时，它会出错。

这是codesandbox https://codesandbox.io/s/nostalgic-benz-0uxyf?file=/src/App.js

Answer 1

尝试替换您的导入：

const { HighlightIcon } = require("@material-ui/icons");

在文档中提供示例（ https://material-ui.com/components/material-icons/ ）：

import HighlightIcon from '@material-ui/icons/Highlight';

这里修复了你的沙箱版本： https://codesandbox.io/s/interesting-snyder-dnyy8?file=/src/App.js

Answer 2

快速简单，没有名为“HighlightIcon”的图标。 您可以在此处查看可用的图标： https://material-ui.com/components/material-icons/

您可以从这里获得提示：“您可能忘记从定义它的文件中导出您的组件”。 基本上，因为您导入了这样的图标：

const { HighlightIcon } = require("@material-ui/icons");

react 在@material-ui/icons 中查找名称为 HighlightIcon 的 class 或 function。 但正如我上面所说，没有一个。

如果您将导入更改为此：

const { Highlight } = require("@material-ui/icons");

您将导入现有图标（称为突出显示）。

Answer 3

你在用这样的东西吗？

#1

import { HomeIcon } from '@material-ui/icons';
<HomeIcon color="primary" />
<HomeIcon color="secondary" />
<HomeIcon color="action" />
<HomeIcon color="disabled" />
<HomeIcon style={{ color: green[500] }} />

#2

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

<Icon>home</Icon>