个性化阅读
专注于IT技术分析

如何在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>
   );
}
  • 输出如下
如何在ReactJS中使用Material-UI更改图标的颜色?1

例子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>
   );
}
  • 输出如下
如何在ReactJS中使用Material-UI更改图标的颜色?2

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


赞(0) 打赏
未经允许不得转载:srcmini » 如何在ReactJS中使用Material-UI更改图标的颜色?
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏