IconButton悬停对材料界面的影响
IconButton悬停对材料界面的影响
提问于 2022-03-31 04:14:01
下面我有与material不同的图标，当我在其中任何一个上悬停时，它都会显示一个灰色的圆圈，我想移除这个灰色的圆圈，每当我悬停在它上面的时候，我希望每个图标都改变到一个特定的颜色--我查看了material中的文档，但是找不到任何解释它的东西，非常感谢您的反馈。
<Box className={classes.socialmedia}>
<IconButton aria-label="twitter">
<TwitterIcon />
</IconButton>
<IconButton aria-label="facebook">
<FacebookIcon />
</IconButton>
<IconButton aria-label="instagram">
<InstagramIcon />
</IconButton>
<IconButton aria-label="Youtube">
<YouTubeIcon />
</IconButton>
<IconButton aria-label="Apple">
<AppleIcon />
</IconButton>
</Box>回答 2
Stack Overflow用户
回答已采纳
发布于 2022-03-31 09:10:51
为了去除悬停背景中显示的灰色循环，可以在disableFocusRipple & disableRipple属性中使用IconButton组件并设置style={{ backgroundColor: 'transparent' }}。例如：
<IconButton
disableFocusRipple
disableRipple
style={{ backgroundColor: "transparent" }}
aria-label="twitter"
>
<TwitterIcon className={classes.twitter} />
</IconButton>若要在悬停时更改图标的颜色，请使用hover选择器。例如：
const useStyles = makeStyles({
twitter: {
"&:hover": {
color: "#00acee"
}
}
});我创建了一个快速示例，以说明代码框中的解决方案：
https://codesandbox.io/s/elegant-ramanujan-wnj9fw?file=/index.js:948-961
Stack Overflow用户
发布于 2022-03-31 08:42:45
定义一个钩子。从makeStyle导入'@material-ui/core/styles'。
const useStyles = makeStyle(() => ({
styleRed: {
'&:hover': {
backgroundColor: '#f00'
}
},
styleBlue: {
'&:hover': {
backgroundColor: '#00f'
}
}
}));然后在您的组件中：
// using our hook
const {styleRed, styleBlue} = useStyles();
// some more code
return (
<>
<IconButton aria-label="twitter" classes={styleRed}>
<TwitterIcon />
</IconButton>
<IconButton aria-label="facebook" classes={styleBlue}>
<FacebookIcon />
</IconButton>
</>
)页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71686823
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号