如何從 MUI 圖標按鈕設置按鈕樣式

Question

我想知道如何從IconButton將樣式應用到 Material UI 的底層Button 。 例如，為了更改關閉圖標懸停/焦點顏色，我當前需要更改: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>
);

我一生都無法弄清楚這應該如何工作，因為他們的文檔沒有提到我可以找到的任何類似內容。 有任何想法嗎？

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

Answer 2

當按鈕聚焦時，我的解決方案圖標會改變它：

button: {
    color: theme.palette.primary.main,
    "&:hover": {
        "& .MuiSvgIcon-root":{
            color: theme.palette.primary.light,
        }
    },
},
buttonIcon: {
    color: theme.palette.common.white,
},

和組件：

<Button
  variant="contained"
  className={classes.button}
  startIcon={<AddIcon className={classes.buttonIcon} />}
  disableRipple
  disableElevation
  disableFocusRipple
  onClick={() => null}
>
  Example
</Button>;

要縮小全局范圍，您可以選擇按鈕內的按鈕圖標類。