悬停在 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

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