diff --git a/.changeset/curly-planets-search.md b/.changeset/curly-planets-search.md
new file mode 100644
index 000000000..e969fe573
--- /dev/null
+++ b/.changeset/curly-planets-search.md
@@ -0,0 +1,5 @@
+---
+'@emotion/serialize': patch
+---
+
+Make `ArrayInterpolation` to extend `ReadonlyArray` to match a similar recent change to `ArrayCSSInterpolation`. It fixes some compatibility issues when those 2 get mixed together.
diff --git a/.changeset/tiny-snails-watch.md b/.changeset/tiny-snails-watch.md
new file mode 100644
index 000000000..80b95fb7e
--- /dev/null
+++ b/.changeset/tiny-snails-watch.md
@@ -0,0 +1,5 @@
+---
+"@emotion/styled": patch
+---
+
+Reordered `styled` overloads to accommodate the recent change in `@emotion/serialize`'s types.
diff --git a/packages/react/types/tests.tsx b/packages/react/types/tests.tsx
index 0a2d59143..332566a6b 100644
--- a/packages/react/types/tests.tsx
+++ b/packages/react/types/tests.tsx
@@ -9,6 +9,7 @@ import {
   withEmotionCache
 } from '@emotion/react'
 import { JSX as EmotionJSX } from '@emotion/react/jsx-runtime'
+import { CSSInterpolation } from '@emotion/serialize'
 
 declare module '@emotion/react' {
   // tslint:disable-next-line: strict-export-declare-modifiers
@@ -23,6 +24,9 @@ declare module '@emotion/react' {
 ;<Global styles={[]} />
 ;<Global styles={theme => [theme.primaryColor]} />
 
+declare const getStyles: () => CSSInterpolation
+;<Global styles={getStyles()} />
+
 declare const getRandomColor: () => string
 
 const ComponentWithCache = withEmotionCache((_props: {}, cache) => {
diff --git a/packages/serialize/types/index.d.ts b/packages/serialize/types/index.d.ts
index 12482c98e..1971b748b 100644
--- a/packages/serialize/types/index.d.ts
+++ b/packages/serialize/types/index.d.ts
@@ -52,7 +52,7 @@ export type Keyframes = {
 } & string
 
 export interface ArrayInterpolation<Props>
-  extends Array<Interpolation<Props>> {}
+  extends ReadonlyArray<Interpolation<Props>> {}
 
 export interface FunctionInterpolation<Props> {
   (props: Props): Interpolation<Props>
diff --git a/packages/styled/types/base.d.ts b/packages/styled/types/base.d.ts
index 05efbaea4..c75842c6f 100644
--- a/packages/styled/types/base.d.ts
+++ b/packages/styled/types/base.d.ts
@@ -63,10 +63,18 @@ export interface CreateStyledComponent<
   SpecificComponentProps extends {} = {},
   JSXProps extends {} = {}
 > {
+  (
+    template: TemplateStringsArray,
+    ...styles: Array<
+      Interpolation<ComponentProps & SpecificComponentProps & { theme: Theme }>
+    >
+  ): StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>
+
   /**
    * @typeparam AdditionalProps  Additional props to add to your styled component
    */
-  <AdditionalProps extends {} = {}>(
+  <AdditionalProps extends {}>(
+    template: TemplateStringsArray,
     ...styles: Array<
       Interpolation<
         ComponentProps &
@@ -80,18 +88,10 @@ export interface CreateStyledComponent<
     JSXProps
   >
 
-  (
-    template: TemplateStringsArray,
-    ...styles: Array<
-      Interpolation<ComponentProps & SpecificComponentProps & { theme: Theme }>
-    >
-  ): StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>
-
   /**
    * @typeparam AdditionalProps  Additional props to add to your styled component
    */
-  <AdditionalProps extends {}>(
-    template: TemplateStringsArray,
+  <AdditionalProps extends {} = {}>(
     ...styles: Array<
       Interpolation<
         ComponentProps &