Material UI 上的 IconButton 悬停效果

Question

下面我有与 material UI 不同的图标，目前，每当我将鼠标悬停在其中任何一个上时，它都会显示一个灰色圆圈，我想删除这个灰色圆圈，并且我希望每个图标都发生变化每当我将鼠标悬停在特定颜色上时，我查看了 material ui 中的文档，但找不到任何解释它的内容，感谢您的反馈。

<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>

Answer 1

定义一个钩子。从 '@material-ui/core/styles'.

导入 makeStyle

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>
  </>
)

Answer 2

为了移除悬停时背景中显示的灰色圆圈，您可以在 IconButton 组件中使用 disableFocusRipple & disableRipple 属性并设置 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"
    }
  }
});

我创建了一个快速示例来说明 codesandbox 中的解决方案：

https://codesandbox.io/s/elegant-ramanujan-wnj9fw?file=/index.js:948-961

Material UI 上的 IconButton 悬停效果

IconButton Hovering Effect on Material UI

icons

hover

reactjs

material-ui

iconbutton