在React中更改图标的颜色
可以通过使用CSS样式或者React图标库来实现。
- 使用CSS样式：可以通过在图标所在的组件中定义一个CSS类，并在该类中设置颜色属性来更改图标的颜色。例如：
import React from 'react';
import './Icon.css';
const Icon = () => {
return <i className="icon"></i>;
}
export default Icon;在Icon.css文件中定义.icon类，并设置颜色属性：
.icon {
color: red;
}- 使用React图标库：React图标库提供了一系列可定制的图标组件，可以直接在组件中设置颜色属性来更改图标的颜色。常用的React图标库包括react-icons和Material-UI等。
使用react-icons库的示例：
import React from 'react';
import { FaReact } from 'react-icons/fa';
const Icon = () => {
return <FaReact color="red" />;
}
export default Icon;使用Material-UI库的示例：
import React from 'react';
import { IconButton } from '@material-ui/core';
import { Favorite } from '@material-ui/icons';
const Icon = () => {
return (
<IconButton color="secondary">
<Favorite />
</IconButton>
);
}
export default Icon;以上是在React中更改图标颜色的两种常见方法。根据具体的需求和项目情况，选择适合的方法来实现图标颜色的更改。
腾讯云相关产品和产品介绍链接地址：
相关·内容
3回答
如何确保当我单击一个图标时，会出现另一个带有React.js的页面
javascript、reactjs
我需要些帮助。我有一个图标，我想当我按下图标时，我可以转到另一个页面，但我得到了这个错误Error: Invariant failed: You should not use <Link> outside a <Router>
这是我的代码：
import React from 'react';
import { IconContext } from "react-icons";
import { BsFileEarmarkArrowDown } from "react-icons/bs";
浏览 5提问于2020-10-27得票数 0
2回答
TypeError:无法读取React中未定义的属性(读取“”name“”)
reactjs、react-native、react-redux、react-hooks、react-router
我收到以下错误TypeError:无法读取react数据中未定义的属性(读取'name')不是来自产品。我现在正在学习反应，这是我的第一个项目，所以你可以帮助解决这个问题。 index.js import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMo
浏览 40提问于2021-10-23得票数 2
回答已采纳
2回答
未被覆盖的材料UI快照条的背景色
javascript、reactjs、material-ui
我正在做一个ErrorHandler在React.JS中，每当ErrorHandler捕捉到错误时，它就会弹出一个重要的UI。问题是，我希望backgroundColor样式属性为红色，但它不会更改为红色。
有人能指导我如何实现颜色的改变吗？
我试过：
在Snackbar组件上使用className属性。
使用ContentProps道具。
在类中使用CSS重写样式。
ErrorHandler.jsx：
import React from "react";
import ErrorIcon from '@material-ui/icons/Error
浏览 0提问于2019-05-29得票数 0
回答已采纳
1回答
为什么我的应用程序中没有显示material组件？
reactjs
因此，我遵循一个反应教程，在项目材料-ui被使用，它是电子商务，所以我有Products.jsx和Product.jsx文件。
Product.jsx文件：
import React from 'react';
import { Card, CardMedia, CardContent, CardActions, Typography, IconButton} from '@material-ui/core';
import { AddShoppingCart } from '@material-ui/icons';
import MuiThem
浏览 11提问于2022-01-08得票数 0
2回答
如何用useState钩子正确地实现反应图标？
html、reactjs、react-hooks、react-icons
在“反应”中，我尝试制作一个功能，让用户在点击时可以通过更改其图标来查看屏幕上的主动反馈。
我怎么能让它改变到另一个图标(例如，从方框到BoxChecked)，一旦我点击它？
注意:我知道这个代码行是问题所在.(呜咽)
<img src={click} alt="icon" onClick={handleClick} />
App.jsx
import React, { useState } from 'react'
import './App.css'
import { GrCheckbox as Box } from '
浏览 8提问于2022-06-07得票数 1
回答已采纳
1回答
如何确保当我按下另一页出现在Reactjs中的图标时
javascript、reactjs、react-router
我有3个文件:根文件、图标文件(组件)和上传文件(组件)。
我想确保当图标被按下时，上传屏幕就会出现。
我在图标文件中添加了路由器函数，以便将其连接到上传文件。
只有当我现在按下它时，什么都不会发生。
我怎么才能解决这个问题？
The Root file:
import React from 'react';
import './App.css';
import ProcurementAnalysis from "./Pages/ProcurementAnalysis/ProcurementAnalysis";
im
浏览 0提问于2020-10-27得票数 0
回答已采纳
2回答
在reactJS中声明状态
reactjs、material-ui
我在将以下代码添加到新创建的reactJS + Material-UI应用程序时遇到了问题
要集成的代码
state = { icon: true }
handleClick = e => {
const { icon } = this.state
this.setState({ icon: !icon })
}
render() {
const { icon } = this.state
return(
<i className='large material-icons' onClick={this.ha
浏览 0提问于2019-07-07得票数 0
1回答
IconButton不显示在屏幕上
reactjs、material-ui
我刚刚开始学习React.js和资料界面.我用在屏幕上显示一个图标。但是，图标没有显示在屏幕上，屏幕显示为空白。
这是我的代码：
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import {IconButtonExampleSimple} from './IconButtonExampleSimple.js&#
浏览 0提问于2017-12-19得票数 1
回答已采纳
1回答
链接更改，但页面不变
reactjs、react-router、material-ui
react-router会更改链接，但页面不会更改。当从URL转到地址时，它可以工作，但不能在单击按钮时工作
ZWrapper.jsx
import React from 'react';
import { Link, NavLink } from 'react-router-dom';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { withStyles, createStyleSheet } from
浏览 2提问于2017-07-14得票数 1
回答已采纳
2回答
找不到模块:无法解析‘资料’-ui/FlatButton
react-redux
我得到了以下错误：
/src/Components/Home/post.jsx模块未找到:无法解析/Users/apple/Documents/dev/source/sm-ui/servicemonster-ui中的“资料-ui/FlatButton”
我试图安装material-ui，但失败了。我怎么才能解决这个问题？
post.jsx
import React from 'react';
import {Card, CardActions, CardHeader, CardMedia, CardTitle, CardText} from 'material-
浏览 7提问于2017-09-08得票数 4
1回答
材料UI元素将不会显示。将显示棕褐色框，而不是任何MUI元素。我该如何解决这个问题呢？
javascript、reactjs、material-ui
我正在尝试使用材料UI来创建一个简单的页眉，页脚和个人资料页面。 每当我尝试渲染任何类型的元素(菜单、应用程序栏、工具栏、IconButton、选项卡、选项卡等)页面显示的是一个棕褐色框，而不是元素本身。见图中的例子- picture of tan boxes：从左到右应该有一个图标按钮，一个登录按钮和3个选项卡，上面写着项目1，2或3)。 功能运行良好。当我点击一个按钮时，我可以添加到新页面的链接。我就是看不到按钮或它的文字。 下面是Header组件的外观： import React from 'react';
import AppBar from '@materi
浏览 16提问于2020-04-29得票数 0
回答已采纳
2回答
如何通过reactjs创建带有图标下文本的按钮？
javascript、css、reactjs、material-ui
现在，我有了这样的组件：
它的代码：
import React from "react";
import {withStyles} from "material-ui/styles";
import Settings from "material-ui-icons/Settings";
import Button from "material-ui/Button";
const styles = {
button: {
color: "primary",
height: 95,
w
浏览 4提问于2018-04-12得票数 7
回答已采纳
2回答
如何解决反应中元素类型无效的错误
javascript、reactjs
我是新的反应，我试图返回一个通用按钮组件。该按钮应该显示三个不同的图标之一，即"DeleteIcon“、"AddIcon”或"EditIcon“。指定的按钮类型在buttonType函数的输入中指定为“IconButton”。
不过，我还是得到了“Reacti-dom.Development.js:24036不变性违规:元素类型无效:期望字符串”-error
以下是代码：
import React from 'react';
import Button from '@material-ui/core/Button';
import Del
浏览 0提问于2019-09-10得票数 4
回答已采纳
2回答
Material:类不使用外部SVG图标？
javascript、reactjs、material-ui、jss
我已经创建了一个物料UI持久抽屉，其中有一个列表项组件，它的目标是在用户单击列表项时更改图标颜色。但我的造型只是使用Material图标，而不是使用外部SVG。
下面是同一个项目的代码框，以便更好地理解它。
这里是呈现我的AppBarDrawer.js组件的父组件。工作良好，可以忽略
import React from "react";
import clsx from "clsx";
import { makeStyles, useTheme } from "@material-ui/core/styles";
import Drawer fr
浏览 7提问于2021-04-14得票数 1
回答已采纳
1回答
ReactJS组件不呈现
reactjs、keystonejs
因此，我使用“KeystoneJS react生成器”作为我的应用程序的框架，以及预定义组件的“Material”。我只是尝试将这些组件分离到不同的文件中，并将它们包含到主应用程序页面上的一个呈现函数中，但它们只是不会呈现，而是得到一个空白页，控制台中没有错误。
请注意，如果我只是将一堆组件扔到我的application.jsx中，我就可以让组件运行，所以我假设我在导入/导出时做错了什么。非常感谢你的帮助，这里的代码..
// application.jsx
/** @jsx ReactDOM.DOM */
import ReactDOM from 'react';
impo
浏览 2提问于2016-02-09得票数 0
回答已采纳
2回答
如何根据条件改变反应样式
reactjs
import "./index.scss";
import { BsInfoCircleFill } from "react-icons/bs";
import { BsCheckCircleFill } from "react-icons/bs";
import { MdOutlineWarning } from "react-icons/md";
function Alert(props) {
if (props.icon === <BsInfoCircleFill />) {
}
re
浏览 1提问于2022-06-13得票数 0
1回答
从使用的卡片列表中打开特定卡的模式。
reactjs、react-hooks、material-ui、react-state、react-modal
我正在使用API来获取数据并将其呈现到卡片中。我想呈现一个对应的模式时，每一张卡被点击。我使用的材料-ui(简单的模态例子)。问题是，不是点击卡的模式，我得到了最后一张卡的模式。我设法在状态钩子中“捕获”了单击卡的数据，但我不知道如何使用它来呈现正确的组件。
--这是显卡呈现的家庭组件：
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { BeerCardExpanded } from './BeerCardExpanded'
浏览 2提问于2021-03-07得票数 0
回答已采纳
1回答
React - JSON文件不会呈现
javascript、reactjs、react-hooks、onclick、use-state
我正在建立一排反应图标。选中要从静态.JSON文件中显示内容的图标。我试图将下列事件结合起来：
单击时会改变颜色
单击时更改/切换静态.JSON内容。
我尝试在这个的基础上将这两个动作内联地组合起来。
但是，只有颜色变化，而不是.JSON数据。谢谢您，如有任何帮助或指导将不胜感激。
下面是我的代码：
import React, { useState } from "react";
import "../Styles/arrow.css";
import { BsFillPeopleFill } from "react-icons/bs";
imp
浏览 3提问于2021-08-25得票数 0
1回答
阻止Icon在材质UI中同时改变
javascript、css、reactjs、typescript、material-ui
我在一个表中有一个图标列表，当单击该图标时，整个图标列表都更改为另一个图标。我应该如何阻止他们同时改变呢？
代码：
import React from 'react';
import {makeStyles, Theme} from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from
浏览 3提问于2020-07-14得票数 1
回答已采纳
2回答
我有一个名为products的数组对象，我循环遍历该对象并将该数组作为道具传递给Product组件。
import React from 'react';
import {Grid} from '@material-ui/core';
import Product from './Product/Product'
const Products = () => {
const products = [
{id: 1, name: 'Shoes', description: 'running shoes&
浏览 0提问于2021-05-14得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
