Question

这是我正在使用的Material-UI中的iconButton。如您所见，将鼠标悬停在图标周围时，图标周围会出现灰色边框。禁用此功能的属性是什么？我尚未在Material-UI文档中找到它，我需要摆脱这种灰色悬停功能。

代码：

<IconButton>
    <BackButton />
</IconButton>

Answer 1

没有禁用它的属性。您只需要覆盖CSS：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Text</p>

使用css规则，例如：

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

Answer 2

（替代方式）

您还可以通过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 3

您可以使用@ material-ui工具提示通过包装组件来添加悬停

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

Answer 4

可以使用 makeStyles(styles) hook 逻辑来更改默认 material-ui IconButton CSS 伪类，例如:hover style

code example：

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>
  );
}

屏幕：

Answer 5

IconButton具有disabled属性：

<IconButton disabled>
    <BackButton />
</IconButton>

https://material-ui.com/api/icon-button/

将鼠标悬停在iconButton上

5 个答案: