在样式化组件中引用泛型typescript函数组件

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的类型(或者至少我还没有找到解决方案。现在，我正在尝试使用样式化组件在另一个组件中设置一些附加样式。

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

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

Answer 1

我在示例中看到的一件事是，您正在尝试扩展无样式组件的样式。您的DataGrid必须定义为一个样式组件，然后才能执行此操作：

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

因此，您必须在DataGrid中扩展样式化组件，或者将DataGrid转换为样式化组件：

const StyledDataGrid = styled(DataGrid)``;