如何从 MUI 图标按钮设置按钮样式

Question

我想知道如何Button从IconButton. 例如，为了更改关闭图标悬停/焦点颜色，我当前需要更改:hover和:focus类。好像应该有这样做的一个简单的方法，在该ButtonBaseAPI文档做实际上提供了这样一个类：focusVisible。但是，我没有尝试成功地应用这种样式。

const useStyles = makeStyles({
  closeButton: {
    "&:hover": { backgroundColor: "yellow" },
    "&:focus": { backgroundColor: "yellow" }
  }
});

const classes = useStyles();

return (
  <IconButton classes={{
      root: classes.closeButton,
      // This gives a warning that "focusVisible" class doesn't exist
      //   on IconButton (which is true, it comes from ButtonBase).
      focusVisible: classes.closeButton
    }}
  >
    <Icon>close</Icon>
  </IconButton>
);

我一生都无法弄清楚这应该如何工作，因为他们的文档没有提到我可以找到的任何类似内容。有任何想法吗？

Icon Button API Docs Button Base API Docs

Answer 1

这是文档的相关部分：https : //material-ui.com/customization/components/#pseudo-classes

以下是如何执行此操作的示例：

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import IconButton from "@material-ui/core/IconButton";
import DeleteIcon from "@material-ui/icons/Delete";

const useStyles = makeStyles(theme => ({
  customHoverFocus: {
    "&:hover, &.Mui-focusVisible": { backgroundColor: "yellow" }
  }
}));

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

  return (
    <div>
      <IconButton aria-label="Delete">
        <DeleteIcon />
      </IconButton>
      <IconButton className={classes.customHoverFocus} aria-label="Delete">
        <DeleteIcon />
      </IconButton>
    </div>
  );
}