ReactJS中Styled Components写法错误致Tooltip失效问题排查

问题描述 #

最初定义Styled Component的方式如下，组件可正常工作：

export const TestClassButton = styled(Button)({ /* 样式定义 */ })

使用代码：

<Tooltip arrow title="status">
   <TestClassButton
     id="button-status-dialog"
     onClick={() => setShowDialog(!showDialog)}
   >
     <ListAltIcon />
   </TestClassButton>
</Tooltip>

但改为以下写法增强样式后，出现类型错误，且Tooltip停止工作：

export const TestClassButton = styled((props) => (
  <Button variant="outlined" {...props} />
))({ /* 样式定义 */ });

原因分析 #

这种函数组件嵌套的写法本身符合Styled Components规范，但问题出在三个关键点：

1. ref透传缺失：Material-UI的Tooltip依赖目标组件的DOM ref来定位弹窗。用自定义函数组件包裹Button时，默认不会透传ref，导致Tooltip无法获取正确的DOM节点，从而失效。
2. 类型推断失效：当用自定义函数组件作为styled()的参数时，TypeScript无法自动推断内部Button的props类型，引发类型检查报错。
3. props处理隐患：虽然代码中用了{...props}，但类型推断失效可能导致Styled Components生成的className等属性无法被正确识别传递，间接影响样式和组件功能。

解决方案 #

需要手动处理ref透传和类型声明，修正后的代码如下：

import { forwardRef } from 'react';
import styled from 'styled-components';
import { Button, ButtonProps } from '@mui/material';

// 用forwardRef透传ref，同时明确指定props类型
export const TestClassButton = styled(forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => (
  <Button variant="outlined" ref={ref} {...props} />
)))({
  /* 你的样式定义 */
});

关键说明： #

• forwardRef：将外部传入的ref透传给内部Button组件，确保Tooltip能获取正确的DOM节点，恢复正常定位功能。
• 类型泛型：通过forwardRef<HTMLButtonElement, ButtonProps>明确指定ref目标类型和props类型，解决TypeScript类型错误。
• props透传：{...props}完整传递了Styled Components生成的className和外部传入的所有属性，保证样式和组件交互功能正常。

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