Material UI：如何完全移除Tooltip的背景颜色

嘿，我来帮你搞定Material UI Tooltip背景透明的问题！你之前的尝试没成功，主要是因为没找对Tooltip内部气泡元素的样式修改方式——直接给Tooltip组件加style或者写错classes的用法都触不到目标元素。咱们一步步来解决：

针对MUI v5（最新版本）的解决方案 #

用sx属性直接穿透修改Tooltip的内部样式是最方便的，代码如下：

import Tooltip from '@mui/material/Tooltip';
import Fab from '@mui/material/Fab';
import AddIcon from '@mui/icons-material/Add';

<Tooltip
  title="Add"
  aria-label="add"
  sx={{
    // 定位到内部的tooltip气泡元素
    '& .MuiTooltip-tooltip': {
      backgroundColor: 'transparent', // 完全透明背景
      color: '#333', // 建议设置文字颜色，默认白色在透明背景下可能看不清
      boxShadow: 'none', // 去掉默认的阴影
      padding: 0, // 可选：去掉默认内边距让文字更紧凑
    },
    // 如果不需要箭头，直接隐藏它
    '& .MuiTooltip-arrow': {
      display: 'none',
    }
  }}
>
  <Fab color="transparent">
    <AddIcon />
  </Fab>
</Tooltip>

针对MUI v4的解决方案 #

如果还在使用v4，用makeStyles创建自定义类来覆盖样式：

import { makeStyles } from '@material-ui/core/styles';
import Tooltip from '@material-ui/core/Tooltip';
import Fab from '@material-ui/core/Fab';
import AddIcon from '@material-ui/icons-material/Add';

const useStyles = makeStyles({
  customTooltip: {
    backgroundColor: 'transparent',
    color: '#333',
    boxShadow: 'none',
    padding: 0,
  },
  hideArrow: {
    display: 'none',
  },
});

function YourComponent() {
  const classes = useStyles();
  return (
    <Tooltip
      title="Add"
      aria-label="add"
      classes={{
        tooltip: classes.customTooltip,
        arrow: classes.hideArrow,
      }}
    >
      <Fab color="transparent">
        <AddIcon />
      </Fab>
    </Tooltip>
  );
}

为什么你之前的方法没用？ #

• 你写的classes={{ tooltip: "backgroundColor: transparent" }}是错误的，classes.tooltip需要接收类名，而不是直接写CSS属性；
• 直接给Tooltip加style={{backgroundColor: "transparent"}}只会修改Tooltip的外层容器，而不是显示的气泡元素，所以完全没效果。

这样修改后，hover的时候就只会显示文字，没有背景和箭头啦！

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