Let’s say you have the following styled component:
What is the type for
I don’t know, but VSCode is here to save the day:
The above image shows me hovering over
AStyledComponent and VSCode showing me what type it is. We can then use this type:
But…what are all these type definitions? And, where do they come from?
Well, after some digging around in react-emotion, create-emotion-styled and react itself — I found these awesome imports:
Note: When I say “digging” I meant going into node_modules/react-emotion, node_modules/create-emotion-styled and looking in their type definitions file (
As for the parameters for
StyledOtherComponent<A, B, C> :
A, denoted as
anyin the images above, is for the properties used within the style definition.
B, denoted as DetailedHTMLProps<HTMLAttributes, HTMLDivElement> is for the component you are wrapping.
C, denoted as
any, is for a theme.
Alright! That’s all I have for you folks today. Let me know if you have any questions or feedback — I’d love to hear it.