如何在按钮悬停时使 React <Font Awesome Icon/> 颜色改变？答案

【问题标题】：How to make React <FontAwesomeIcon/> color changed on button hover?如何在按钮悬停时使 React <Font Awesome Icon/> 颜色改变？
【发布时间】：2020-07-13 06:26:12
【问题描述】：

我对 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 中用 span 替换 FontAwesomeIcon，它就可以工作。

如果有任何建议或建议，我将不胜感激。

【问题讨论】：

css 呢？
希望这个例子能帮助到codesandbox.io/s/font-awesome-and-react-kpoty
@ManirajMurugan，感谢您的快速回答，如果我只将鼠标悬停在图标上，它会完美工作，但在悬停整个 div 时我需要相同的效果。 :)
@tabrez，给你codesandbox.io/s/react-simple-contact-list-1xvkn 还添加了您提供的代码作为答案.. 希望我的解决方案对您有所帮助..
@tabrez 我更新了我的answer，如果您也只需将鼠标放在按钮上，它就可以正常工作

标签： html css reactjs frontend

【解决方案1】：

您可以在FontAwesomeIcon 组件上使用className 属性。

所以只要写一个css规则：

.tablinks:hover .fa-icon {
  color: red;
}

然后把这个类交给组件：

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

【讨论】：

【解决方案2】：

既然 CSS 可以做很多事情，我就不加倍了。

但是，如果你想编写没有 styled-components 或其他东西的纯 JSX。

您可以使按钮 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>
  );
}

【讨论】：

感谢您的快速回答，如果我只将鼠标悬停在图标上，它会完美运行，但在悬停按钮时我需要相同的效果。 :)
真的吗？使用useState 反应钩子来处理可以使用css 在一行中实现的hover 事件？ @tabrez 我真的不建议你使用这种方法
@keikai @tabrez 是的，确实不需要down-vote，但看到这种类型的反应代码作为答案真的很痛苦：/

【解决方案3】：

使用CSS可以达到效果，

HTML： 将className 表示为upload-icon 到父div 并将className 表示为font-upload 到FontAwesomeIcon。

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

Working sandbox

注意：请考虑使用className 而不是class.. Ref Link

【讨论】：