如何使 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 .fa-icon {
  color: red;
}

然后将此类赋予组件：

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

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