如何为styled-components添加自定义属性类型解决left属性TS报错

TypeScript 抛出 TS2339 错误的核心逻辑是：styled-components 包装第三方组件时，默认只会继承被包装组件（即 Ant Design Tooltip）的原生 Props 类型，你自定义新增的left属性不属于 Antd Tooltip 的原生属性定义，类型系统找不到对应字段就会抛出类型不存在的错误。

二选一即可：

方案1：显式声明styled组件的自定义属性类型（推荐） #

这是类型安全度最高的写法，不会丢失TS的类型校验能力，只需要修改样式文件的代码：

import styled from 'styled-components';
import { Tooltip as TooltipAnt, TooltipProps } from 'antd';

// 扩展自定义属性类型，继承原Tooltip的所有Props
type StyledTooltipProps = TooltipProps & {
  left?: string | number;
};

export const Children = styled.div`
  position: relative;
  display: inline;
  > * {
    position: relative;
    display: inline;
  }
`;

// 给styled传入泛型，声明支持的自定义属性
export const Tooltip = styled(TooltipAnt)<StyledTooltipProps>`
  .ant-tooltip-content {
    position: relative;
    overflow-x: hidden;
    overflow-y: visible;
    padding-bottom: 20px;
    display: inline-block;
  }

  .ant-tooltip {
    left: ${props => props.left || 0} !important;
  }

  .ant-tooltip-arrow {
    display: none;
  }

  .ant-tooltip-inner {
    padding: 10px 15px;
    background: white;
    display: inline-block;
    border-radius: 10px;
    border: 3px solid #D04A02;
    border-bottom-right-radius: 0;
    z-index: 2;
    max-width: 200px;
    color: #000;
    box-shadow: none;
    word-wrap: break-word;
  }

  .ant-tooltip-content:before {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    background: white;
    bottom: 14px;
    right: -8px;
    transform: rotate(25deg);
    border-bottom: 3px solid #D04A02;
  }

  .ant-tooltip-content:after {
    content: '';
    width: 3px;
    background: #D04A02;
    height: 50%;
    position: absolute;
    right: -0.5px;
    bottom: 12px;
  }
`;

改完之后组件使用的代码不需要任何调整，TS会自动识别left属性，同时保留原Tooltip所有属性的类型校验。

方案2：临时绕过类型校验（不推荐） #

如果只是临时调试不想调整类型定义，可以在传参时用类型断言绕开TS检查，但这种写法会丢失对应属性的类型提示，不建议在生产代码中大量使用：

export const CustomTooltip = ({ title, children, left }: Props) => (
    <Styled.Tooltip
        title={title}
        getPopupContainer={(triggerNode) => triggerNode}
        {...({ left } as Record<string, any>)}
    >
        <Styled.Children>{children}</Styled.Children>
    </Styled.Tooltip>
);

你当前代码中已经配置了getPopupContainer={(triggerNode) => triggerNode}，将Tooltip弹出层挂载到当前触发节点下，这个配置不要删除，否则你写的样式穿透和left偏移逻辑不会生效——Antd Tooltip默认会将弹出层渲染到body节点下，脱离当前组件的DOM层级。

内容的提问来源于stack exchange，提问作者A curious student