Material UI 上的 IconButton 悬停效果

发布于 2025-01-17 22:00:44 字数 840 浏览 3 评论 0 原文

下面我有来自 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>

原文

below i have different icons from material UI , which currently displays a grey circle whenever i hover on any of them , i want to remove this grey circle and i want each icon to change to a specific color whenever i hover over it i looked at the documentation in material ui but couldn't find anything that explains it , appreciate your feedback.

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

牵你的手，一向走下去 2025-01-24 22:00:44

为了删除悬停在背景中的灰色圆圈，您可以使用 disableFocusripple ＆amp; disableripple iconbutton中的属性组件和set style = {{backgroundColor：'透明'}}} 。
例如：

<IconButton
    disableFocusRipple
    disableRipple
    style={{ backgroundColor: "transparent" }}
    aria-label="twitter"
  >
    <TwitterIcon className={classes.twitter} />
  </IconButton>

要更改悬停图标的颜色，然后使用悬停选择器。
例如：

    const useStyles = makeStyles({
  twitter: {
    "&:hover": {
      color: "#00acee"
    }
  }
});

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

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

In order to remove the grey circle displaying in background on hover then you can use disableFocusRipple & disableRipple property in IconButton component and set style={{ backgroundColor: 'transparent' }}.
Ex:

<IconButton
    disableFocusRipple
    disableRipple
    style={{ backgroundColor: "transparent" }}
    aria-label="twitter"
  >
    <TwitterIcon className={classes.twitter} />
  </IconButton>

To change the color of icon on hover then use hover selector.
Ex:

    const useStyles = makeStyles({
  twitter: {
    "&:hover": {
      color: "#00acee"
    }
  }
});

I've created a quick example to illustrate the solution in codesandbox:

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

回复收藏 0 原文

挽清梦 2025-01-24 22:00:44

定义钩子。导入 makestyle 来自'@Iterity-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>
  </>
)

Define a hook. Import makeStyle from '@material-ui/core/styles'.

const useStyles = makeStyle(() => ({
  styleRed: {
    '&:hover': {
      backgroundColor: '#f00'
    }
  },
  styleBlue: {
    '&:hover': {
      backgroundColor: '#00f'
    }
  }
}));

Then in your component:

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

回复收藏 0 原文

~没有更多了~