MUI Tooltip样式深度定制：移除默认背景与边框

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

const useStyles = makeStyles({
  customTooltip: {
    background: "white",
    color: "black",
    margin: "0px",
    whiteSpace: "normal",
    maxWidth: "40px"
  }
});

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

  return (
    <Tooltip title={title} placement="bottom-start">
      <div>
        {children}
        {/* 错误的样式应用方式：样式应用到p标签，而非Tooltip容器 */}
        <Tooltip
          title={
            <p className={classes.customTooltip}>
              {"Nested Tooltip"}
            </p>
          }
          placement="bottom-start"
        >
          <div>icon</div>
        </Tooltip>
      </div>
    </Tooltip>
  );
};

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

export default App;

import React from "react";
import { Tooltip } from "@mui/material";
// 注意：MUI v5+ 推荐使用 @mui/material/styles 中的 `styled` API 或 `sx` prop
// 但如果项目仍在使用 @mui/styles (MUI v4 或兼容模式)，则此导入是正确的。
import { makeStyles } from "@mui/styles";

// 定义自定义样式
const useStyles = makeStyles({
  customTooltipStyle: { // 更改类名以避免与组件名混淆，并更明确表示其用途
    backgroundColor: "white", // 使用 backgroundColor 而非 background，更精确
    color: "black",
    // 移除默认的边距，MUI Tooltip通常没有外部margin，但为了确保干净，可以保留
    // margin: "0px", 
    whiteSpace: "normal", // 允许文本换行
    maxWidth: "150px", // 增加最大宽度以容纳更多文本
    border: "none", // 明确移除边框
    boxShadow: "0px 2px 10px rgba(0, 0, 0, 0.1)" // 可以添加自定义阴影
  }
});

const CustomTooltipComponent = ({ title, children }) => { // 更改组件名以避免与Tooltip混淆
  const classes = useStyles();

  return (
    <Tooltip title={title} placement="bottom-start">
      <div>
        {children}
        <Tooltip
          title="嵌套 Tooltip" // title prop 应该直接是字符串或ReactNode，而不是包裹在p标签里
          placement="bottom-start"
          // 关键：通过 classes prop 将自定义样式应用到 Tooltip 的 tooltip 槽
          classes={{ tooltip: classes.customTooltipStyle }}
        >
          <div>Hover for Nested</div>
        </Tooltip>
      </div>
    </Tooltip>
  );
};

const App = () => (
  <CustomTooltipComponent title="外部 Tooltip">
    <div>将鼠标悬停在我身上</div>
  </CustomTooltipComponent>
);

export default App;