Проблемы при создании обёртки компонента с использованием styled-component и TypeScript

Question

Создавая библиотеку компонентов, я хотел включить компоненты макета непосредственно в библиотеку. Для этого я только что создал классический компонент (Container, Row и Col), который на самом деле является просто копией из библиотеки response-grid-system .

Так, например, мой компонент Col выглядит так:

import React from 'react'
import styled from 'styled-components'
import { Col as ReactGridSystemCol, ColProps } from 'react-grid-system';

// C O M P O N E N T
const Col: React.FunctionComponent<ColProps> = (props) => {
  const { children } = props

  return (
    <StyledCol {...props}>
      {children}
    </StyledCol>
  )
}

// S T Y L E S
const StyledCol = styled<ColProps>(ReactGridSystemCol)` // <- Type 'ColProps' does not satisfy the constraint '"symbol" | "object" ...
  /* ... */
`

StyledCol.displayName = 'StyledCol'

export default Col

Логически я говорю, что мой компонент StyledCol наследуется от компонента ReactGridSystemCol, поэтому я буду Я могу добавить стили к этому, и он будет отображаться в моем jsx.

Затем я должен управлять реквизитом, который может получить мой компонент Col. Они точно такие же, как у ReactGridSystemCol, поэтому я использую тип библиотеки, ColProps.

. Затем я указываю, что StyledCol может получить этот реквизит, используя styled<ColProps>(ReactGridSystemCol).

.

Проблема заключается в том, что явно существует ошибка типа, потому что машинопись возвращает эту ошибку:

Type 'ColProps' does not satisfy the constraint '"symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | ... 157 more ... | FunctionComponent<...>'.
  Type 'ColProps' is not assignable to type 'FunctionComponent<any>'.
    Type 'ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & { width?: string | number | undefined; ... 5 more ...; component?: (() => string) | undefined; } & Partial<...>' provides no match for the signature '(props: any, context?: any): ReactElement<any, any> | null'.

Я не совсем понимаю мою ошибку здесь, так что если у вас есть какие-либо идеи, я был бы очень признателен.

Answer 1

Попробуйте что-то вроде этого.

const StyledCol = styled(ReactGridSystemCol)<ColProps>``