Reactjs 带有样式的工具提示导致无法向功能组件提供参考警告

早上好,

我有一个样式化的MUI工具提示组件来为它创建一个定制的主题. 当我使用它时，我在浏览器控制台中收到以下警告:

client.js:1 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `Styled(Component)`.
    at eval (webpack-internal:///./src/components/lightToolTip.tsx:23:28)
    at eval (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js:60:66)
    at _c1 (webpack-internal:///./src/components/lightToolTip.tsx:49:27)
    at LinkComponent (webpack-internal:///./node_modules/next/dist/client/link.js:113:26)
    at div
    at eval (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js:60:66)
    at Box (webpack-internal:///./node_modules/@mui/system/esm/createBox.js:37:72)
    at div
    at eval (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js:60:66)
    at Box (webpack-internal:///./node_modules/@mui/system/esm/createBox.js:37:72)
    at div
    at div
    at eval (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-
[...]

所以代码看起来就像

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

在进行了一些Google搜索之后，我已经try 包装样式组件:

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

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

export const LightTooltip = React.forwardRef<HTMLDivElement, TooltipProps>((props, ref) => {
    return <InnerLightTooltip {...props} ref={ref} classes={{ popper: props.className }} />;
});

LightTooltip.displayName = 'LightTooltip';

我不知道为什么会出现此警告，也不知道如何修复.