How to efficiently type your styled-components with Flow
Maxime Heckel
1332

A good example to demonstrate when to use flow.

Have you tried to specify the type of props in ${props => props.theme.colour[props.colour]} as well? That’s the most challenging part of using flow with third-party libraries. From my experience with flow and styled-components, if the type of props is not specified in the expression above, props is any instead of TitleProps and this piece of code is considered as uncovered. It means flow does not check it. If you specify props: TitleProps you have to add theme to your TitleProps and once you do that, flow will insist you have to pass theme as a part of your propswhen you create the component. However, the point to use ThemeProvider is not to pass a theme down the tree explicitly. The example from flow doc to use defaultProps to silence flow complaining doesn’t work with styled-components out of the box and doesn’t make much sense for the ThemeProvider case anyway. There is obviously a hack-ish workaround: declare theme possibly void and write the expression above like ${({theme, colour}: TitleProps) => (theme ? theme.colour[colour] : null)} . In this case, it will pass all checks and the colour enum will be checked. Still feels like cheating flow :)