如何修改Material UI按钮的图标颜色及移除点击波纹效果

Material UI的Button组件原生提供disableRipple属性，直接添加到Button标签上即可关闭点击波纹特效，修改后的Button代码如下：

<Button
  className={classes.buttonStyle}
  variant="contained"
  disableElevation
  disableRipple // 新增这行即可关闭当前按钮的波纹效果
>
  <ArrowBackIosIcon />
</Button>

如果需要全局关闭所有Button的波纹效果，可以在主题配置时统一设置：

import { createTheme, ThemeProvider } from '@material-ui/core/styles';

const customTheme = createTheme({
  components: {
    MuiButtonBase: {
      defaultProps: {
        disableRipple: true,
      },
    },
  },
});
// 后续用ThemeProvider包裹项目根组件即可全局生效

有两种常用实现方式，均和你当前使用的makeStyles写法兼容：

• 方式1：新增自定义样式类统一控制，适合复用性高的场景
  修改useStyles新增图标专属样式：

const useStyles = makeStyles({
  buttonStyle: {
    color: "",
    background: "red",
    "&:hover": {
      transform: "scale(1.1)",
      background: "red",
    },
  },
  // 新增图标自定义样式
  backIcon: {
    color: "#ffffff", // 替换为你需要的颜色值即可，支持十六进制、rgb、rgba、内置颜色名
    fontSize: "18px" // 也可额外控制尺寸、边距等其他属性
  }
});

给图标组件绑定对应的样式类：

<ArrowBackIosIcon className={classes.backIcon} />

• 方式2：通过内联style属性直接设置，适合临时修改、无需复用的场景

<ArrowBackIosIcon style={{color: "#ffffff"}} />

内容的提问来源于stack exchange，提问作者Sava