Javascript 如何更改悬停时的图标颜色？

我正在尝试更改

IconButton

材质组件中材质图标的颜色（此操作应触发颜色更改-将鼠标悬停在

IconButton

上）

如何做到这一点？仅当将鼠标悬停在图标本身上而不是图标按钮上时，才可以直接向图标添加类

我的代码：

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

{！showForm？
您可能需要一个
悬停
状态。因此，您可以对外部图标使用
onMouseEnter
和
onMouseLeave
，然后通过对内部图标使用此条件来设置样式。此逻辑是借用的。因此，我将答案设置为CW

<IconButton
  onMouseEnter={() => {
    setHover(true);
  }}
  onMouseLeave={() => {
    setHover(false);
  }}
  className="add-icon-btn"
  onClick={toggleNominationForm}
>
  {!showForm ? (
    <AddBoxIcon style={{ backgroundColor: hover ? "blue" : "yellow" }} />
  ) : (
    <IndeterminateCheckBoxIcon />
  )}
</IconButton>

{
setHover（真）；
}}
onMouseLeave={（）=>{
setHover（假）；
}}
className=“添加图标btn”
onClick={toggleNominationForm}
>
{！表演形式(
) : (
)}
尝试添加以下CSS-

.IconButton:hover .Iconclass {
  background-color: /*desired color*/;
}

这里有一个完整的示例，我希望这能解决您的问题：

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',
    },
}))

从“React”导入React
从“@material ui/styles”导入{makeStyles}
从“@material ui/core/IconButton”导入IconButton
从“@material ui/icons/AddBox”导入AddBox图标
从“@material ui/icons/IndeterminateCheckBox”导入indeterminatecheckboxion
导出默认值（）=>{
const[showForm，setShowForm]=React.useState（false）
常量类=useClasses（）
返回(
{！展示
? 
: 
}
)
}
const useClasses=makeStyles（主题=>({
iconContainer：{
“&：悬停$icon”：{
颜色：“红色”，
}
},
图标：{
颜色：“蓝色”，
},
}))
一个正在运行的stackblitz演示确实有助于理解您的查询。我不知道为什么，但我无法在那里创建一个可行的应用程序-如果您不想使用扩展部分，只需检查您不需要使用扩展部分，然后像