如何在点击Material-Table操作按钮时去除灰色背景

你遇到的灰色背景是Material Table默认给Action列的图标外层套的MuiIconButton组件的点击/激活态样式导致的，你之前只覆盖了默认和hover状态的背景，没有覆盖激活、焦点等状态的样式，所以点击时灰色背景仍然会出现。

方案1：样式全量覆盖 #

修改你现有rootTable的样式，补充覆盖所有交互状态的背景色：

rootTable: {
  "& .MuiIconButton-root": {
    backgroundColor: 'transparent !important',
    // 覆盖hover状态
    '&:hover': {
      backgroundColor: 'transparent !important',
    },
    // 覆盖点击按下状态
    '&:active': {
      backgroundColor: 'transparent !important',
    },
    // 覆盖键盘聚焦高亮状态
    '&.Mui-focusVisible': {
      backgroundColor: 'transparent !important',
    },
    // 可选：如果还有点击水波纹效果，直接隐藏水波纹根元素
    '& .MuiTouchRipple-root': {
      display: 'none',
    }
  },
}

方案2：自定义Action组件（更推荐，从根源解决问题） #

你可以直接重写Material Table的Action渲染逻辑，去掉默认套在图标外层的IconButton组件，彻底消除多余的button父元素：
在你的Material Table的components配置中新增Action字段即可：

components={{
  // 新增这段覆盖默认Action渲染逻辑
  Action: props => {
    if (typeof props.action.icon === 'function') {
      // 直接返回你自定义的Switch组件，不包裹IconButton
      return props.action.icon(props.data);
    }
    return null;
  },
  // 你原有Toolbar的逻辑保持不变
  Toolbar: props => {
    const propsCopy = { ...props };
    propsCopy.showTitle = false;
    return (
      <Grid container direction="row" alignItems={"center"}>
        <Grid container item xs={3} justify={'flex-end'}>
          {t('LBL.NUMBER_OF_LOGINS')+": "+ data.length}
        </Grid>
        <Grid container item xs={3} justify={'flex-end'}>
          {renderPasswordVisibleToggle()}
        </Grid>
        <Grid item xs={6}>
          <MTableToolbar {...propsCopy} />
        </Grid>
      </Grid>
    );
  }
}}

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