Material-UI 中 IconButton 的懸停效果

Question

圖標按鈕懸停

這是我正在使用的 Material-UI 中的 iconButton。 如您所見，當您將鼠標懸停在圖標上時，圖標周圍會出現輕微的灰色邊框。 禁用此功能的屬性是什么？ 我在 Material-UI 文檔中沒有找到它，我需要擺脫這個灰色懸停功能。

代碼：

<IconButton>
    <BackButton />
</IconButton>

Answer 1

（另一種方式）

您還可以通過 MuiThemeProvider 覆蓋 IconButton 樣式：

import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';

const theme = createMuiTheme({
  overrides: {
    MuiIconButton: {
      root: {
        '&:hover': {
          backgroundColor: "$labelcolor"
        }
      }
    }
  }
})

並使用以下代碼包裝您要編輯的組件：

<MuiThemeProvider theme={theme}>

// Your Component here

</MuiThemeProvider>

Answer 2

沒有屬性可以禁用它。 您只需要覆蓋 CSS：

<IconButton className={"MyCustomButton"}>
    <BackButton />
</IconButton>

使用如下 CSS 規則：

.MyCustomButton:hover {
  background-color: inherit !important;
}

Answer 3

可以使用makeStyles(styles)鈎子邏輯來更改默認材質-ui IconButton CSS 偽類，例如:hover樣式

代碼示例：

import { makeStyles } from "@material-ui/core/styles";
import { IconButton } from "@material-ui/core";
import ArrowBackIcon from "@material-ui/icons/ArrowBack";

const useStyles = makeStyles((theme) => ({
  myClassName: {
    backgroundColor: "#EFD26E",
    position: "relative",
    "&:hover": {
      backgroundColor: "green"
    }
  }
}));

export default function App() {
  const classes = useStyles();

  return (
    <div className="App">
      <IconButton color="inherit" className={classes.myClassName}>
        <ArrowBackIcon />
      </IconButton>
    </div>
  );
}

屏幕：

• 背景顏色
• 懸停時的 bg 顏色

Answer 4

<IconButton sx={{ "&:hover": { color: "green" } }}>
    <BackButton />
</IconButton>

Answer 5

您可以使用hoverColor: Colors.transparent ：

IconButton(
  hoverColor: Colors.transparent, 
  icon: Icon(Icons.clear_rounded),
  onPressed: () {},
),

Answer 6

您可以通過使用 @material-ui Tooltip 包裝組件來添加懸停

<Tooltip>
  ...your code here
</Tooltip>