如何改变图标的颜色和消除按钮材质用户界面上的波浪

Question

const useStyles = makeStyles({
  buttonStyle: {
    color: "",
    background: "red",

    "&:hover": {
      transform: "scale(1.1)", // Scale by 10%
      background: "red",
    },
  },
});

   <div>
      <h1>Heloo</h1>
      <Button
        className={classes.buttonStyle}
        variant="contained"
        disableElevation
      >
        <ArrowBackIosIcon />
      </Button>
    </div>

点击“有浪”按钮，如何删除该按钮，以及如何将图标组件样式设置为不同颜色。

Answer 1

下面是您的代码的沙箱链接。

您可以使用按钮上的支柱disableRipple 道具来消除波纹效应。

<Button
  className={classes.buttonStyle}
  variant="contained"
  disableElevation
  disableRipple
  disableFocusRipple>
    <ArrowBackIosIcon />
</Button>

有多种方法，您可以使用它来更新图标的样式。我已经使用type选择器来为按钮中的图标设置样式。您还可以使用className来设置图标的样式。下面是附加沙箱链接中useStyles的一个片段。

"& svg": {
  color: "white"
}