New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add TypeScript support of using other styled components in selectors #882
Add TypeScript support of using other styled components in selectors #882
Conversation
@philpl @patrick91 @brunolemos please review. |
@@ -20,7 +20,7 @@ export type OuterStyledProps<P> = ThemedOuterStyledProps<P, any>; | |||
|
|||
export type Interpolation<P> = FlattenInterpolation<P> | ReadonlyArray<FlattenInterpolation<P> | ReadonlyArray<FlattenInterpolation<P>>>; | |||
export type FlattenInterpolation<P> = InterpolationValue | InterpolationFunction<P>; | |||
export type InterpolationValue = string | number; | |||
export type InterpolationValue = string | number | StyledComponentClass<any, any>; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Not sure an interpolation can be a StyledComponentClass?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It can. So StyledComponentClass
produced by a styled function:
const Link: StyledComponentClass<any, any> = styled.a` color: blue; `;
then it can be used in both functional and constant interpolations:
const Section = styled.section`
color: black;
${Link} {
color: red;
}
${p => p.theme.linkClass || Link} {
color: red;
}
`;
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oh right, that's new from v2
@Igorbek I'll let for people who use TypeScript to review your code |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM :)
A following up PR to #837
any
sCHANGELOG