尝试将props传递给样式组件时，Typescript React错误。 “没有重载匹配此呼叫。”

Question

将鼠标悬停在带有诸如fontSize和color之类的道具的样式化组件上时，会出现错误。仅当在组件本身中使用样式组件时，该组件才会出错，因此在传递道具时会出错。

错误：

No overload matches this call.
  Overload 1 of 2, '(props: Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "color" | ... 254 more ... | "is"> & { ...; } & Props, "fontSize" | ... 257 more ... | "align"> & Partial<...>, "fontSize" | ... 257 more ... | "align"> & { ...; } & { ...; }): ReactElement<...>', gave the following error.
    Type '{ children: (string | string[])[]; fontSize: string; color: string; }' is missing the following properties from type

组件：

import React from 'react'
import ParagraphElement from './style'

export interface ParagraphProps {
  fontSize: string,
  color: string,
  text?: string,
  // align: string,
  // css: object, // optional object for added custom styles.
  children: string[],
}

export const Paragraph: React.FC<ParagraphProps> = ({
  fontSize,
  color,
  text = 'Default paragraph text.',
  // align,
  children,
  // css,
}: ParagraphProps) =>
  (
    <ParagraphElement
      fontSize={fontSize}
      color={color}
    >
      {text}
      {children}
    </ParagraphElement>
  )

样式化的组件

import styled from 'styled-components'

type Props = {
  color: string,
  fontSize: string,
  align: string,
  css: object,
}

const ParagraphElement = styled.p<Props>`
  font-size: ${props => props.fontSize ? props.fontSize : props.theme.typeScale.paragraph};
  color: ${props => props.color ? props.color : props.theme.primaryColor};
  text-align: ${props => props.align ? props.align : props.theme.align};
`

export default ParagraphElement