悬停伪类不适用于 React 中的 FontAwesome 图标答案

【问题标题】：Hover pseudoclass is not working on FontAwesome icon in React悬停伪类不适用于 React 中的 FontAwesome 图标
【发布时间】：2019-12-06 03:49:01
【问题描述】：

我很困惑。昨天我在另一个组件中做了同样的事情，它工作得很好。让我给你看代码...

<FontAwesomeIcon onClick={this.displayVerticalNavbar} className="faColorOverwriter" id="toggleInContNavBar" icon={faBars} pull="right"/>

    #toggleInContNavBar:hover{
    height:84%;
    opacity:0.8;
    cursor:pointer;
}

今天，我一直在尝试在其他组件中做类似的事情，并且 :hover 无论如何都行不通。为什么会这样？

我的当前密码：

<FontAwesomeIcon id="menuSearchElementEdit" icon={faEdit}/>

    #menuSearchElementEdit:hover{
    opacity:0.8;
    cursor:pointer;
}

【问题讨论】：

标签： css reactjs font-awesome

【解决方案1】：

此代码对我有用。您可以按如下方式添加光标样式，而不是添加不同的 CSS。

<FontAwesomeIcon id="menuSearchElementEdit" icon={faEdit} style={{ cursor: "pointer" }}/>

【讨论】：

虽然此代码可能会回答问题，但提供有关此代码为何和/或如何回答问题的额外上下文可提高其长期价值。
您可以使用以下代码应用样式。这对我有用。样式={{ 光标：“指针”}}