diff --git a/.changeset/cyan-jobs-carry.md b/.changeset/cyan-jobs-carry.md new file mode 100644 index 000000000..a9f060ad5 --- /dev/null +++ b/.changeset/cyan-jobs-carry.md @@ -0,0 +1,5 @@ +--- +'@emotion/styled': minor +--- + +Added basic TS type support for `as` prop on styled components. It's possible to pass any component to it but it has no effect on other accepted props. This means that it's not 100% type-safe so use it sparingly and with care. diff --git a/packages/styled/types/base.d.ts b/packages/styled/types/base.d.ts index 51ece5732..672915089 100644 --- a/packages/styled/types/base.d.ts +++ b/packages/styled/types/base.d.ts @@ -106,12 +106,22 @@ export interface CreateStyled { >( component: C, options: FilteringStyledOptions, ForwardedProps> - ): CreateStyledComponent, ForwardedProps> & { theme?: Theme }> + ): CreateStyledComponent< + Pick, ForwardedProps> & { + theme?: Theme + as?: React.ElementType + } + > >>( component: C, options?: StyledOptions> - ): CreateStyledComponent & { theme?: Theme }> + ): CreateStyledComponent< + PropsOf & { + theme?: Theme + as?: React.ElementType + } + > < Tag extends keyof JSX.IntrinsicElements, @@ -120,14 +130,17 @@ export interface CreateStyled { tag: Tag, options: FilteringStyledOptions ): CreateStyledComponent< - { theme?: Theme }, + { theme?: Theme; as?: React.ElementType }, Pick > ( tag: Tag, options?: StyledOptions - ): CreateStyledComponent<{ theme?: Theme }, JSX.IntrinsicElements[Tag]> + ): CreateStyledComponent< + { theme?: Theme; as?: React.ElementType }, + JSX.IntrinsicElements[Tag] + > } declare const styled: CreateStyled diff --git a/packages/styled/types/tests-base.tsx b/packages/styled/types/tests-base.tsx index 3160048bc..71fa346c8 100644 --- a/packages/styled/types/tests-base.tsx +++ b/packages/styled/types/tests-base.tsx @@ -423,3 +423,12 @@ const StyledButton = StyledDiv.withComponent('button') e }} /> + +const StyledWithAs = styled('div')` + display: flex; +` +const Section = styled('section')` + color: hotpink; +` +; +;