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

Material-UI 图标是一个基于 React 的模块。 Material-UI 库为用户提供了最高效、最有效和用户友好的界面。 React 提供了1000 多个Material-UI 图标。它是最受欢迎和最受欢迎的框架之一。为了在 React 中使用 Material-UI，我们需要安装 Material-UI 和 Material-UI 图标。另外，自定义样式可以参考 Material-UI 中 SVG 图标组件的 API。

先决条件：

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

下面按顺序描述了所有步骤，以便为图标添加颜色。

安装：

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

npm install @material-ui/core

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

npm install @material-ui/icons

第 3 步：安装模块后，现在打开项目目录中 src 文件夹下的 App.js 文件，然后删除其中的代码。
第四步：现在，安装完成后，我们可以使用图标组件的 color 属性来改变图标的颜色。我们也可以使用 style 属性。
第 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 ：将图标的颜色更改为绿色。

应用程序.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 (
    
      GeeksForGeeks
      {/* We provide inline css to make the color of the home 
          icon as green. We use style prop for the same. */}
      
      Let's start
    
  );
}

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 (
    
      GeeksForGeeks
      {/* We provide inline css to make the color of the
          home icon as green. We use style prop for the same. */}
      
      Let's start
    
  );
}

输出

示例 2 ：将图标的颜色更改为红色。

应用程序.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 (
    
      GeeksForGeeks
      {/* We provide inline css to make the color of the
          home icon as green. We use style prop for the same. */}
      
      Let's start
    
  );
}

输出

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