reactjs - 在样式组件中引用通用打字稿功能组件

Question

我创建了一个通用组件来呈现这样的 DataGrid：

interface Props<T extends unknown> {
    header: HeaderItem[]
    data?: T[],
    className?: string,
    children?: (row: T) => React.ReactElement[]
}

const DataGrid = <T extends unknown>({ header, data, className, children }: Props<T>): React.ReactElement | null => {
   ...
}

由于泛型类型，无法将其设置React.FC<Props<T>>为类型DataGrid（或者至少我还没有找到解决方案。现在我正在尝试使用 styled-components 在另一个组件中设置一些额外的样式。

const Container = styled.div`
    ${DataGrid} {

    }
`

通过使用它，构建失败并显示错误消息“没有重载匹配此调用”

TypeScript error in ...:
No overload matches this call.
  Overload 1 of 3, '(first: TemplateStringsArray | CSSObject | InterpolationFunction<ThemedStyledProps<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "slot" | ... 253 more ... | "onTransitionEndCapture"> & { ...; } & ColumnProps, any>>, ...rest: Interpolation<...>[]): StyledComponent<...>', gave the following error.
    Argument of type '<T extends unknown>({ header, data, className, children }: Props<T>) => React.ReactElement | null' is not assignable to parameter of type 'Interpolation<ThemedStyledProps<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "slot" | "style" | "title" | ... 251 more ... | "onTransitionEndCapture"> & { ...; } & ColumnProps, any>>'.
      Type '<T extends unknown>({ header, data, className, children }: Props<T>) => React.ReactElement | null' is not assignable to type 'InterpolationFunction<ThemedStyledProps<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "slot" | "style" | "title" | ... 251 more ... | "onTransitionEndCapture"> & { ...; } & ColumnProps, any>>'.
        Types of parameters '__0' and 'props' are incompatible.
          Property 'header' is missing in type 'Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "slot" | "style" | "title" | ... 251 more ... | "onTransitionEndCapture"> & { ...; } & ColumnProps & ThemeProps<...>' but required in type 'Props<unknown>'.
  Overload 2 of 3, '(first: TemplateStringsArray | CSSObject | InterpolationFunction<ThemedStyledProps<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "slot" | ... 253 more ... | "onTransitionEndCapture"> & { ...; } & ColumnProps & Props<...>, any>>, ...rest: Interpolation<...>[]): StyledComponent<...>', gave the following error.
    Argument of type '<T extends unknown>({ header, data, className, children }: Props<T>) => React.ReactElement | null' is not assignable to parameter of type 'Interpolation<ThemedStyledProps<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "slot" | "style" | "title" | ... 251 more ... | "onTransitionEndCapture"> & { ...; } & ColumnProps & Props<...>, any>>'.
      Type '<T extends unknown>({ header, data, className, children }: Props<T>) => React.ReactElement | null' is not assignable to type 'InterpolationFunction<ThemedStyledProps<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "slot" | "style" | "title" | ... 251 more ... | "onTransitionEndCapture"> & { ...; } & ColumnProps & Props<...>, any>>'.
        Type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)> | null' is not assignable to type 'Interpolation<ThemedStyledProps<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "slot" | "style" | "title" | ... 251 more ... | "onTransitionEndCapture"> & { ...; } & ColumnProps & Props<...>, any>>'.
          Type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)>' is not assignable to type 'Interpolation<ThemedStyledProps<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "slot" | "style" | "title" | ... 251 more ... | "onTransitionEndCapture"> & { ...; } & ColumnProps & Props<...>, any>>'.
            Type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)>' is not assignable to type 'CSSObject'.
              Index signature is missing in type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)>'.  TS2769

当我删除泛型时，一切正常。有没有办法将引用的样式与泛型一起使用？

标签： reactjstypescriptstyled-components