如何在 React 中渲染 Material UI 图标?

熔狗

我是 React 的新手,想在现有组件中呈现 Material UI 图标(来自https://www.npmjs.com/package/@material-ui/icons)。

我注意到之前在组件上工作的人包含了具有属性的图标,例如:

<FieldWrapper scrollToOnFocus icon={<SomeMaterialIcon />}>

但我需要像在一些现有的 html 中一样添加我的图标,例如:

<a href="/somewhere">Read more ICON HERE</a>

我不确定如何做到这一点。添加{<SomeMaterialIcon />}<SomeMaterialIcon />直接添加到 HTML 行会破坏组件。

有谁知道如何做到这一点?

埃里克·马丁

假设您已经安装了包 (@material-ui/icons) 并正确导入了 Icon,它应该像<SomeMaterialIcon />.

例子:

import React from "react";
import ReactDOM from "react-dom";

import AddIcon from '@material-ui/icons/Add';

function App() {
  return (
    <div>
      <a href="/somewhere"><AddIcon /></a>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

编辑 62v3mr03kk

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在React中覆盖material-ui-next CSS?

如何在React中使用Material UI图标?

在material-ui v.1.3中如何使用图标?

如何在React Material UI中实现全局主题?

如何更改KeyboardTimePicker(material-ui-pickers)中的图标?

如何在Material-UI的React中更改链接的颜色?

如何使用material-ui图标中的图标?

如何在Material UI中为React更改Alert上的图标大小

将鼠标悬停在Material-UI React中时如何更改复选框样式和图标?

如何在Material-UI IconButton中居中对齐自定义SVG图标

从数组渲染Material-UI图标

如何在material-ui select中更改下拉图标(箭头)的位置?

React Material UI下拉菜单图标

如何将样式对象添加到数组中的每个图标?(React / Material-ui)

如何使用 Material-UI AppBar onTitleClick 属性在 React 中渲染新组件?

如何在 React Material UI 的 AppBar 组件中设置容器?

Material-UI:如何在反应中的输入字段中显示搜索图标?

在 Material UI 和 React 中的文本输入中添加图标

Material UI:如何在 React Material Ui Stepper 中更改标签的字体大小?

如何从 Material UI TextField 中删除箭头图标

如何在 Material UI TextField 组件中的关闭图标上添加自定义处理程序?

如何替换 react-material-ui datepicker 的导航图标?

如何从 React Functional Component 中的单个按钮/图标处理 Material UI Drawer 打开和关闭?

如何覆盖 Material UI DataGrid 中的图标?

如何增加 Material-UI React 中的图标数量

如何在 React Material UI 字段中设置值

如何更改 TextField 日期选择器的日历图标的颜色?在 Material-UI React 中

如何在 material-ui 中更改时间选择器图标颜色

Material-UI - 如何在自动完成中自定义下拉图标?