Added basic TS type support for as prop on styled components (#1874)

* Add type for as prop

* Add changeset

* Simplify type for `as` prop

* Tweak changeset

Co-authored-by: Mateusz Burzyński <[email protected]>

Author: connor-baer

.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.

packages/styled/types/base.d.ts

@@ -106,12 +106,22 @@ export interface CreateStyled {
   >(
     component: C,
     options: FilteringStyledOptions<PropsOf<C>, ForwardedProps>
-  ): CreateStyledComponent<Pick<PropsOf<C>, ForwardedProps> & { theme?: Theme }>
+  ): CreateStyledComponent<
+    Pick<PropsOf<C>, ForwardedProps> & {
+      theme?: Theme
+      as?: React.ElementType
+    }
+  >
 
   <C extends React.ComponentType<React.ComponentProps<C>>>(
     component: C,
     options?: StyledOptions<PropsOf<C>>
-  ): CreateStyledComponent<PropsOf<C> & { theme?: Theme }>
+  ): CreateStyledComponent<
+    PropsOf<C> & {
+      theme?: Theme
+      as?: React.ElementType
+    }
+  >
 
   <
     Tag extends keyof JSX.IntrinsicElements,
@@ -120,14 +130,17 @@ export interface CreateStyled {
     tag: Tag,
     options: FilteringStyledOptions<JSX.IntrinsicElements[Tag], ForwardedProps>
   ): CreateStyledComponent<
-    { theme?: Theme },
+    { theme?: Theme; as?: React.ElementType },
     Pick<JSX.IntrinsicElements[Tag], ForwardedProps>
   >
 
   <Tag extends keyof JSX.IntrinsicElements>(
     tag: Tag,
     options?: StyledOptions<JSX.IntrinsicElements[Tag]>
-  ): CreateStyledComponent<{ theme?: Theme }, JSX.IntrinsicElements[Tag]>
+  ): CreateStyledComponent<
+    { theme?: Theme; as?: React.ElementType },
+    JSX.IntrinsicElements[Tag]
+  >
 }
 
 declare const styled: CreateStyled

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;
+`
+;<StyledWithAs as="section" />
+;<StyledWithAs as={Section} />