javascript - 如何在 react 中使用样式更改 onHover 上的图标颜色？

Question

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

<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

我们没有任何内联样式的 Action

We don't have any actions inline style like

:悬停但是你可以使用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>

or the best way : you use css file and import it in your css

.icon:hover { color:white}

然后在你的js文件中导入它

 import './yourcssfile.css'