gpt4 book ai didi

javascript - 如何更改悬停时的图标颜色?

转载 作者:行者123 更新时间:2023-12-03 23:06:27 26 4
gpt4 key购买 nike

我正在尝试更改 IconButton 内的 Material 图标的颜色 Material 组件(应该触发颜色变化的 Action - 悬停在 IconButton 上)。

如何做到这一点?仅当将鼠标悬停在图标本身上而不是悬停在 IconButton 上时,才能直接向图标添加类.

我的代码:

<IconButton className="add-icon-btn" onClick={toggleNominationForm}>
{!showForm ? <AddBoxIcon /> : <IndeterminateCheckBoxIcon /> }
</IconButton>

enter image description here

最佳答案

在这里你有一个完整的例子,我希望这能解决你的问题:

import React from 'react'
import { makeStyles } from '@material-ui/styles'
import IconButton from '@material-ui/core/IconButton'
import AddBoxIcon from '@material-ui/icons/AddBox'
import IndeterminateCheckBoxIcon from '@material-ui/icons/IndeterminateCheckBox'

export default () => {

const [showForm, setShowForm] = React.useState(false)
const classes = useClasses()

return (
<IconButton
classes={{
root: classes.iconContainer
}}
>
{!showForm
? <AddBoxIcon className={classes.icon}/>
: <IndeterminateCheckBoxIcon className={classes.icon}/>
}
</IconButton>
)
}

const useClasses = makeStyles(theme => ({
iconContainer: {
"&:hover $icon": {
color: 'red',
}
},
icon: {
color: 'blue',
},
}))

关于javascript - 如何更改悬停时的图标颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62412436/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com