如何使 React <FontAwesomeIcon/> 颜色在按钮悬停时发生变化？

Question

我对 React 还很陌生，无法解决这个问题。基本上，我只想在悬停按钮时更改“FontAwesomIcon”标签的颜色，而不是“span”标签内文本的颜色。我也在使用react-bootstrap。这是我的代码，

<div class="tab">

   <Link to="/dataset-upload">

      <button class="tablinks" onClick={this.handleClick}>

            <FontAwesomeIcon icon={faCloudUploadAlt} size="lg"/> 

            <span>Dataset Upload</span>

      </button>

  </Link>

</div>

这是 FontAwesomeIcon 的 CSS，

.tab button FontAwesomeIcon:hover{

    color: #86BC25;

}

如果我在 CSS 中将 FontAwesomeIcon 替换为 span ，它就可以工作。

我将不胜感激任何建议或建议。

Answer 1

className您可以在组件上使用该属性FontAwesomeIcon。所以只要写一个css规则：.tablinks:hover&nbsp;.fa-icon&nbsp;{ &nbsp;&nbsp;color:&nbsp;red; }然后将此类赋予组件：<FontAwesomeIcon&nbsp;icon={faCloudUploadAlt}&nbsp;size="lg"&nbsp;className="fa-icon"&nbsp;/>

Answer 2

由于 CSS 可以做很多事情，所以我不会加倍。但是，如果你想编写纯 JSX 而不styled-components使用其他东西。您可以完全控制按钮 mouseOver 事件：import React, { useState } from "react";import "./styles.css";import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";import { faCloudUploadAlt } from "@fortawesome/free-solid-svg-icons";export default function App() {  const [over, setOver] = useState(false);  return (    <div className="App">      <button        onMouseOver={() => setOver(true)}        onMouseLeave={() => setOver(false)}      >        <FontAwesomeIcon          icon={faCloudUploadAlt}          size="lg"          style={over ? { color: "red" } : {}}        />        <span>Dataset Upload</span>      </button>    </div>  );}

Answer 3

使用CSS你可以达到这样的结果，HTML：向父 div添加classNamesay like并对.upload-iconclassNamefont-uploadFontAwesomeIcon<div className="tab upload-icon"> <Link to="/dataset-upload">   <button className="tablinks" onClick={this.handleClick}>   <FontAwesomeIcon     icon={faCloudUploadAlt}     size="lg"     className="font-upload"      />    <span>Dataset Upload</span>    </button>  </Link></div>CSS：将鼠标悬停在父 div 上时upload-icon，更改font-upload类似的颜色，.upload-icon:hover .font-upload {  color: green;}工作沙箱注意：请考虑使用className而不是class..

Answer 4

//as component, take value as prop, if we pass color as prop, then its value will be immutable<FaTimesCircle className="fa-icon" />//css file.fa-icon{color: blueviolet;}.fa-icon:hover {color: rgb(255, 72, 72);}