时间戳

首页 > 解决方案 > 如何更改图标颜色并移除按钮材质 ui 上的波浪

reactjs - 如何更改图标颜色并移除按钮材质 ui 上的波浪

问题描述

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>

对单击按钮进行默认设置有波浪，如何删除它，以及如何将图标组件设置为不同的颜色

标签： reactjsmaterial-ui

解决方案

这是您的代码的沙盒链接。

您可以使用按钮上的 propdisableRipple 道具去除波纹（波浪）效果。

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

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

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

推荐阅读