如何添加类型的样式组件

Question

我正在使用antd进行工具提示，并且想将Props 左添加到样式的组件中。

当我将悬停在样式组件中留下的道具时，我会遇到以下错误：

Property 'left' does not exist on type 'ThemedStyledProps<(TooltipProps & RefAttributes<unknown>) & {}, DefaultTheme>'.
  Property 'left' does not exist on type 'TooltipPropsWithTitle & RefAttributes<unknown> & ThemeProps<DefaultTheme>'.ts(2339)

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

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

export const Tooltip = styled(TooltipAnt)`
  .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;
  }
`;

import * as Styled from './Tooltip.styles';

type Props = {
    title: string;
    children: React.ReactNode;
    left?: string;
};

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

Answer 1

我曾经遇到过一个类似的问题，唯一修复的是将符号更改为包括该元素的道具：

export const Tooltip = styled(TooltipAnt)<{ left: number }>`
  .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;
  }