STYLED-COMPONENTS IN TYPESCRIPT

IMPLEMENTING THE DOT NOTATION

-

Dec 18, 2018

When developing a library of React components, there’s often a scenario where a subcomponent is always supposed to be used with its parent. For example, there’s Flex and its child FlexItem. Or better yet, Flex.Item. The dot notation has a number of advantages, and it would be good to be able to implement it in TypeScript in combination with Styled-components.

You might be able to fiddle with the interface of your parent class, as suggested here, but since the internal implementation of Styled-components changes regularly, it might break in time even if you can get it to work.