材質UI上的IconButton懸停效果-有解無憂

下面我有來自 Material UI 的不同圖示，當前每當我將滑鼠懸停在其中任何一個上時都會顯示一個灰色圓圈，我想洗掉這個灰色圓圈，并且我希望每個圖示在我將滑鼠懸停在它上面時都變為特定顏色我看著材料 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>

uj5u.com熱心網友回復：

為了消除懸停時背景中顯示的灰色圓圈，您可以在IconButtondisableFocusRipple組件中使用&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"
    }
  }
});

我創建了一個快速示例來說明代碼沙箱中的解決方案：

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

uj5u.com熱心網友回復：

定義一個鉤子。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>
  </>
)

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/453271.html

標籤：反应材料-ui 徘徊图标图标按钮

上一篇：啟動反應服務器

下一篇：獲取useState回傳的值