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

Posted 2023-02-22

【中文标题】如何在按钮悬停时使 React <Font Awesome Icon/> 颜色改变？

【英文标题】：How to make React <FontAwesomeIcon/> color changed on button hover?

【发布时间】：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，如果您也只需将鼠标放在按钮上，它就可以正常工作

【参考方案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