如何在ReactJS中使用Material-UI更改图标的颜色？

本文概述

• JavaScript
• JavaScript

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>
   );
}

• 输出如下

因此, 使用上述步骤, 我们可以使用Material-UI导入和更改React中图标的颜色。