Styled MUI Tooltip触发‘Function components cannot be given refs’警告求助

初始代码里，你用styled包裹了一个自定义函数组件，这个组件没通过React.forwardRef转发ref。当父组件（比如你的LinkComponent）尝试给LightTooltip传ref时，函数组件默认不接收ref，就会触发这个警告。

你后来试的forwardRef写法不对：InnerLightTooltip作为styled组件，它的ref没正确传递给内部的Tooltip，而且你还重复处理了classes属性，既没解决ref问题，还可能搞乱样式。

给你两种正确的写法，优先选第一种：

写法一：直接给Tooltip加styled样式（推荐） #

不用额外嵌套函数组件，直接用styled包裹MUI的Tooltip，ref会自动传递到底层组件：

import { Tooltip, TooltipProps, styled, tooltipClasses } from '@mui/material';

export const LightTooltip = styled(Tooltip)<TooltipProps>(({ theme }) => ({
  [`& .${tooltipClasses.tooltip}`]: {
    backgroundColor: theme.palette.neutral[900],
    color: 'rgba(255, 255, 255, 255)',
    boxShadow: theme.shadows[1],
    fontSize: 11,
  },
}));

写法二：内部组件正确转发ref #

如果一定要保留自定义组件的结构，得先让内部组件接收ref并传给Tooltip：

import { Tooltip, TooltipProps, styled, tooltipClasses } from '@mui/material';
import React, { forwardRef } from 'react';

// 先让内部组件通过forwardRef把ref传给Tooltip
const InnerTooltip = forwardRef<HTMLDivElement, TooltipProps>(({ className, ...props }, ref) => (
  <Tooltip {...props} ref={ref} classes={{ popper: className }} />
));
InnerTooltip.displayName = 'InnerTooltip';

// 再用styled包裹这个已经转发ref的组件
export const LightTooltip = styled(InnerTooltip)<TooltipProps>(({ theme }) => ({
  [`& .${tooltipClasses.tooltip}`]: {
    backgroundColor: theme.palette.neutral[900],
    color: 'rgba(255, 255, 255, 255)',
    boxShadow: theme.shadows[1],
    fontSize: 11,
  },
}));

• 第一种写法最直接，因为MUI的Tooltip本身已经支持ref转发，用styled直接包裹它，ref会自动透传给底层的DOM元素或组件实例。
• 第二种写法里，必须先让内部函数组件通过forwardRef接收ref并传递给Tooltip，再用styled包裹，这样styled组件才能正确处理ref，不会触发警告。

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