Как стиль кнопки от кнопки со значком MUI

Question

Мне интересно, как применить стили к основному пользовательскому интерфейсу Material Button из IconButton.Например, чтобы изменить цвет наведения / фокусировки на значок закрытия, мне нужно изменить классы :hover и :focus.Кажется, что должен быть более простой способ сделать это, документы ButtonBase API действительно предоставляют класс для этого: 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>
);

Я не могу понять, как это должно работать, потому что в их документах нет ничего подобного, что ямогу найти.Есть идеи?

Документы API Button Button Документы API Button Base

Answer 1

Вот соответствующая часть документации: https://material -ui.com / customization / components / # псевдоклассы

Вот пример того, как это сделать:

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