search

patrick91 / Styled-Components-Typescript-Example

Sample "app" using typescript and styled components.
104 stars 27 forks source link

Invalid Section children type #9

Closed DavidHenri008 closed 6 years ago

DavidHenri008 commented 6 years ago

Hi, I am getting the following error in the main.tsx file on the Section component:

Type '{ children: Element; }' is not assignable to type 'Readonly<ThemedOuterStyledProps<WithOptionalTheme<SectionProps, IThemeInterface>, IThemeInterface>>'.\n Types of property 'children' are incompatible.\n Type 'Element' is not assignable to type 'string | number | ReactElement<any> | undefined'.\n Type 'Element' is not assignable to type 'ReactElement<any>'.\n Types of property 'type' are incompatible.\n Type 'string | ComponentClass<any> | StatelessComponent<any>' is not assignable to type 'string | ComponentClass<any, any> | StatelessComponent<any>'.\n Type 'ComponentClass<any>' is not assignable to type 'string | ComponentClass<any, any> | StatelessComponent<any>'.\n Type 'ComponentClass<any>' is not assignable to type 'StatelessComponent<any>'.\n Types of property 'propTypes' are incompatible.\n Type 'React.ValidationMap<any> | undefined' is not assignable to type 'import(\"c:/Git/Styled-Components-Typescript-Example/node_modules/@types/prop-types/index\").ValidationMap<any> | undefined'.\n Type 'React.ValidationMap<any>' is not assignable to type 'import(\"c:/Git/Styled-Components-Typescript-Example/node_modules/@types/prop-types/index\").ValidationMap<any>'.\n Index signatures are incompatible.\n Type '((object: any, key: string, componentName: string, ...rest: any[]) => Error | null) | undefined' is not assignable to type 'Validator<any>'.\n Type 'undefined' is not assignable to type 'Validator<any>'.

The children type of the Section component does not seem to match the expected React.ReactChild type. How come the styled function does not return a ReactChild element?

Any help would be greatly appreciate. Thanks.

patrick91 commented 6 years ago

Hi :) That's because the ReactChild is wrong it should be ReactNode, my bad, but actually, it can now be removed since the typings add the child prop automatically ;)

Just pushed a fixed here: https://github.com/patrick91/Styled-Components-Typescript-Example/commit/7bb6f236f47fac20182a610abc59ce656a1dfc88