React中移除MUI Tooltip默认背景并解决嵌套Tooltip灰色边框问题

你当前只给Tooltip的title内容（p标签）设置了样式，但灰色边框是Tooltip组件自带的容器元素的样式，不是title内部标签的，所以得直接覆盖容器的样式才能彻底移除边框，实现纯白背景黑文字的效果。

修改步骤 #

• 扩展useStyles，添加针对Tooltip容器的样式，移除边框、默认阴影，同时设置背景和文字颜色
• 通过Tooltip的classes属性把自定义样式绑定到容器上
• 如果要显示箭头，同步修改箭头颜色适配白色背景

修改后的完整代码 #

import React from "react";
import { Tooltip } from "@mui/material";
import { makeStyles } from "@mui/styles";

const useStyles = makeStyles({
  customTooltipContainer: {
    background: "white",
    color: "black",
    border: "none", // 直接移除容器边框
    boxShadow: "none", // 去掉默认阴影（默认阴影容易被误认为是边框）
    maxWidth: "40px",
    whiteSpace: "normal"
  },
  // 箭头样式（启用箭头时才需要）
  customTooltipArrow: {
    color: "white"
  }
});

const CustomTooltip = ({ title, children }) => {
  const classes = useStyles();

  return (
    <Tooltip title={title} placement="bottom-start">
      <div>
        {children}
        <Tooltip
          title="Nested Tooltip"
          placement="bottom-start"
          classes={{
            tooltip: classes.customTooltipContainer,
            arrow: classes.customTooltipArrow
          }}
          arrow={true} {/* 可选：需要显示箭头就加上 */}
        >
          <div>icon</div>
        </Tooltip>
      </div>
    </Tooltip>
  );
};

const App = () => (
  <CustomTooltip title="Outer Tooltip">
    <div>Hover Me</div>
  </CustomTooltip>
);

export default App;

关键说明 #

1. customTooltipContainer直接作用于Tooltip的容器元素，覆盖了默认的深色背景、边框和阴影，完全自定义了容器样式
2. 用classes={{ tooltip: 自定义类 }}是MUI组件覆盖内置样式的标准方式，比只给title内容加样式更彻底
3. 如果开启了箭头，customTooltipArrow会把箭头颜色改成白色，避免和白色背景出现违和的灰色边框

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