[英]How to change icon color on hover?
在这里你有一个完整的例子,我希望这能解决你的问题:
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',
},
}))
您可以使用以下属性
sx={{ "&:hover": { color: "blue" } }}
<IconButton
size="large"
aria-label="show 17 new notifications"
color="inherit"
sx={{ "&:hover": { color: "blue" } }}
>
<Badge badgeContent={17} color="primary">
<LayersIcon />
</Badge>
</IconButton>
您可能需要一个hover
state。 因此,您可以将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>
尝试添加以下 CSS -
.IconButton:hover .Iconclass {
background-color: /*desired color*/;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.