如何为MUI Tooltip创建自定义Hook优化Navbar组件

方案一：封装带Tooltip的按钮组件（推荐） #

这种方式直观且复用性强，能避免重复编写Tooltip标签。直接将CustomButton与Tooltip整合为一个组件，默认复用按钮文本作为Tooltip标题：

首先导入Tooltip组件：

import { Button, styled, Tooltip } from "@mui/material";

然后在Navbar组件内封装TooltipButton：

const Navbar = () => {
  const { notify, Toaster } = useAlert();

  const CustomButton = styled(Button)({
    backgroundColor: "#D6E4EC",
    color: "#2F4F4F",
    "&:hover": {
      backgroundColor: "#abc4ff",
      color: "#2b2d42",
    },
  });

  // 封装带Tooltip的按钮，自动用按钮文本作为标题
  const TooltipButton = ({ title, placement = "top", ...props }) => {
    const tooltipTitle = title || props.children;
    return (
      <Tooltip title={tooltipTitle} placement={placement}>
        <CustomButton {...props} />
      </Tooltip>
    );
  };

  return (
    <div className="navbar">
      <img src={Company} className="company-logo " alt="company-logo" />
      <Toaster />
      <ul>
        <li className="nav-item">
          <TooltipButton
            className="Button"
            size="small"
            startIcon={<AccountCircleIcon />}
            onClick={() => notify("Account")}
          >
            Account
          </TooltipButton>
        </li>
        <li className="nav-item">
          <TooltipButton
            className="Button"
            startIcon={<WorkIcon />}
            size="small"
          >
            Opportunities
          </TooltipButton>
        </li>
        <li className="nav-item">
          <TooltipButton
            className="Button"
            startIcon={<LocalActivityIcon />}
            size="small"
          >
            Activities
          </TooltipButton>
        </li>
        <li className="nav-item">
          <TooltipButton
            className="Button"
            startIcon={<PersonIcon />}
            size="small"
          >
            People
          </TooltipButton>
        </li>
        <li className="nav-item">
          <TooltipButton
            className="Button"
            startIcon={<CategoryIcon />}
            size="small"
          >
            Products
          </TooltipButton>
        </li>
        <li className="nav-item">
          <TooltipButton
            className="Button"
            startIcon={<AssessmentIcon />}
            size="small"
          >
            Reports
          </TooltipButton>
        </li>
        <li className="nav-item">
          <TooltipButton
            className="Button"
            startIcon={<LogoutIcon />}
            size="small"
          >
            Logout
          </TooltipButton>
        </li>
      </ul>
    </div>
  );
};

export default Navbar;

若需自定义Tooltip标题或位置，直接给TooltipButton传对应参数即可：

<TooltipButton title="退出账户" placement="bottom" ...>
  Logout
</TooltipButton>

方案二：自定义Hook实现 #

如果偏好使用Hook，可以编写一个返回包装函数的Hook，用于给任意组件添加Tooltip：

先创建自定义Hook：

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

const useTooltip = () => {
  // 返回包装函数，接收组件和自定义标题，返回带Tooltip的组件
  const wrapWithTooltip = (Component, customTitle) => {
    return ({ children, title = customTitle, placement = "top", ...props }) => {
      const tooltipTitle = title || children;
      return (
        <Tooltip title={tooltipTitle} placement={placement}>
          <Component {...props}>{children}</Component>
        </Tooltip>
      );
    };
  };

  return wrapWithTooltip;
};

export default useTooltip;

然后在Navbar组件中使用：

import useTooltip from "../hooks/useTooltip"; // 导入自定义Hook

const Navbar = () => {
  const { notify, Toaster } = useAlert();
  const wrapWithTooltip = useTooltip();

  const CustomButton = styled(Button)({
    // 样式保持不变
  });

  // 用Hook包装CustomButton，得到带Tooltip的按钮组件
  const TooltipButton = wrapWithTooltip(CustomButton);

  // 后续按钮替换为TooltipButton，用法与方案一一致
  return (
    // 返回内容同方案一
  );
};

内容的提问来源于stack exchange，提问作者shoaib ulla khan