Styling components with required props triggering an TypeScript error
theBork opened this issue · 4 comments
When I try to wrap custom React components with goober's "styled" method, TypeScript shows error im cases when component have required props.
import React from 'react'
import { styled } from 'goober'
interface IProps {
myProp: string
}
const Component: React.FC<IProps> = (props) => {
return <div>{props.myProp}</div>
}
const StyledComponent = styled(Component)``
/* Argument of type 'FC<IProps>' is not assignable to parameter of type 'Element | ElementClass'.
Type 'FunctionComponent<IProps>' is missing the following properties from type 'ElementClass': render, context, setState, forceUpdate, and 3 more. */
When I change myProp to optional, there is no errors.
TypeScript: 4.7.4
Goober: 2.1.10
Sandbox with problem's example: https://codesandbox.io/s/goober-typescript-styled-custom-component-y25bq0?file=/src/Component.tsx
Thanks @theBork for opening this issue.
Might be due to this line https://github.com/cristianbote/goober/blob/master/goober.d.ts#L32 wondering how can I add the FC interface in there 🤔. Is there a JSX.FC maybe?
@cristianbote yes, I think that JSX.Element, that used in this line of code describes type of Element like that:
<Component myProp={myProp} />
or
React.createElement(Component, { myProp })
When we provide our component as argument to styled method, they are not Element yet, so I think changing to JSX.FC will help. I can make PR next days, if you want :)
That would be super helpful @theBork! Much appreciated.