如何在ReactJS中使用Material-UI更改图标的颜色（） _前端开发

本文概述

JavaScript
JavaScript

【如何在ReactJS中使用Material-UI更改图标的颜色（）】Material-UI图标是一个React基于模块。 Material-UI库为用户提供了最有效, 最有效和用户友好的界面。 React提供的不只是1000Material-UI图标。它是最受欢迎和最受欢迎的框架之一。为了在React中使用Material-UI, 我们需要安装Material-UI和Material-UI图标。此外, 对于自定义样式, 你始终可以在Material-UI中引用SVG图标组件的API。
先决条件：

基础知识ReactJS
已经创建了ReactJS应用

下面将按顺序描述所有步骤, 以向图标添加颜色。
安装：

第1步：在进一步操作之前, 首先, 我们必须在你的项目目录中运行以下命令, 并在src文件夹中的终端的帮助下安装Material-UI模块, 或者你也可以在项目中Visual Studio Code的终端中运行此命令夹。

npm install @material-ui/core

第2步：安装Material-UI模块后, 现在可以在src文件夹中的终端的帮助下, 通过在项目目录中运行以下命令来安装Material-UI图标, 或者你也可以在项目文件夹中的Visual Studio Code的终端中运行此命令。

npm install @material-ui/icons

第三步：安装模块后, 现在打开位于项目目录src文件夹下的App.js文件, 并删除其中的代码。
步骤4：现在, 在安装之后, 我们可以使用图标组件的颜色属性来更改图标的颜色。我们也可以使用样式道具。
第5步：现在导入React, Material-UI核心颜色和Material-UI图标模块
第6步：在你的app.js文件中, 添加此代码段以导入React, Material-UI核心颜色和Material-UI图标模块。

import React from 'react'; import green from "@material-ui/core/colors/green"; import MailIcon from "@material-ui/icons/Mail";

下面是一个示例程序, 用于说明color prop的用法：
例子1：将图标的颜色更改为绿色。

app.js：

JavaScript

import React from 'react' ; // Importing the color of your choice from Material-UI import green from "@material-ui/core/colors/green" ; // Importing Home icon from Material-UI . You can refer to the // API of this SVG icon component in Material-UI import HomeIcon from "@material-ui/icons/HomeTwoTone" ; export default function App() { return ( < div classname= "App" > < h1> < center> srcmini< /center> < /h1> { /* We provide inline css to make the color of the home icon as green. We use style prop for the same. */ } < center> < HomeIcon style={{ color: "green" }} /> < /center> < h2> < center> Let's start< /center> < /h2> < /div> ); }

输出如下

文章图片
例子2：将图标的颜色更改为红色。

app.js：

JavaScript

import React from 'react' ; // Importing the color of your choice from Material-UI import red from "@material-ui/core/colors/red" ; // Importing Home icon from Material-UI . You can refer to // the API of this SVG icon component in Material-UI import HomeIcon from "@material-ui/icons/HomeTwoTone" ; export default function App() { return ( < div classname= "App" > < h1> < center> srcmini< /center> < /h1> { /* We provide inline css to make the color of the home icon as green. We use style prop for the same. */ } < center> < HomeIcon style={{ color: "red" }} /> < /center> < h2> < center> Let's start< /center> < /h2> < /div> ); }