如何通过样式在反应中更改图标颜色 onHover？

Question

我有一些具有初始样式的图标，styles。

<div className="w3-padding w3-xxlarge w3-text-grey">
                <a href='/About'><i className="fa fa-user-circle" style={styles.icons}></i></a>
                <a href='/Skills'><i className="fas fa-cog" style={styles.icons}></i></a>
                <a href='/Portfolio'><i className="far fa-eye" style={styles.icons}></i></a>
                <a href='/Contact'><i className="far fa-envelope" style={styles.icons}></i></a>
                </div>

我想添加悬停样式，例如将颜色更改为白色。我在同一个文件中有样式：

const styles = {
    icons: {
        width: '70%',
    }
}

Answer 1

我们没有任何动作内联样式

我们没有像

这样的动作内联样式

:hover 但是你可以使用Js代码

<div className="w3-padding w3-xxlarge w3-text-grey" >
    <a href='/About'}>
       <i className="fa fa-user-circle icon" style={styles.icons} 
      onMouseOver={({target})=>target.style.color='white'} 
      onMouseOut={(target)=>target.style.color='#00F'}>
       </i>
    </a>
</div>

或者最好的方法：你使用 css 文件并导入它 在你的 CSS 中

.icon:hover { color:white}

并在你的js文件中导入它

 import './yourcssfile.css'