React17+MUI5使用Tooltip报reading 'tooltip'类型错误如何修复

该报错的核心原因是 Material UI v5 所有组件依赖全局主题上下文，未正确配置时Tooltip会读取不到主题内的tooltip配置项，从而触发该类型错误

修复步骤如下：

• 第一步：确认Tooltip的导入路径是否正确，MUI v5的包名已更新为@mui/material，不要使用旧版本的@material-ui/core路径：

import Tooltip from '@mui/material/Tooltip';

• 第二步：在应用的根组件外层必须包裹ThemeProvider，并传入createTheme生成的主题对象，这是MUI v5的强制要求，参考配置：

// 通常在 index.tsx 或 App.tsx 中配置
import { createTheme, ThemeProvider } from '@mui/material/styles';

// 无需自定义主题的情况下直接调用createTheme生成默认主题即可
const globalTheme = createTheme();

function App() {
  return (
    <ThemeProvider theme={globalTheme}>
      {/* 原有应用的所有组件都放在ThemeProvider内部 */}
      <YourMainComponent />
    </ThemeProvider>
  );
}

• 第三步：如果你已经配置了自定义主题，检查是否在手动覆写components配置时误删了tooltip相关的默认配置，确保没有错误清空主题的components字段即可。

额外说明：你当前代码里Tooltip包裹的是原生div元素，无需额外处理ref转发，要是后续你用自定义组件作为Tooltip的直接子元素，需要用React.forwardRef包裹自定义组件转发ref，避免功能异常。

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