Known issues with Emotion

While Compiled has a very similar API to Emotion, there are some known issues specific to Emotion that you may need to address.

For Compiled limitations not specific to migrating from Emotion, see our limitations page.

@emotion/core types are not compatible with Compiled

Emotion v10 (@emotion/core) extends the global interfaces for the css prop, causing the css prop to only work with Emotion, and not styled-components or Compiled. As a result, you may run into Type 'CSSProps<unknown>' is not assignable to type 'InterpolationWithTheme<any>'. errors.

To fix this, we recommend:

• Upgrading to Emotion v11 (@emotion/react) before migrating to Compiled. This involves removing @emotion/core (v10 API) and replacing it with @emotion/react (v11 API). Emotion v11 uses types that do not conflict with Compiled, as long as Emotion and Compiled components are not defined in the same file.
• If you cannot remove @emotion/core from your repository, you may be able to apply a patch similiar to the one below. You may need to change the patch manually for it to work for your specific version.

diff --git a/node_modules/@emotion/core/types/index.d.ts b/node_modules/@emotion/core/types/index.d.ts
index 123456..abcdef 100644
--- a/node_modules/@emotion/core/types/index.d.ts
+++ b/node_modules/@emotion/core/types/index.d.ts
@@ -78,22 +78,3 @@ export interface ClassNamesProps<Theme> {
 export function ClassNames<Theme = any>(
   props: ClassNamesProps<Theme>
 ): ReactElement
-
-declare module 'react' {
-  interface DOMAttributes<T> {
-    css?: InterpolationWithTheme<any>
-  }
-}
-
-declare global {
-  namespace JSX {
-    /**
-     * Do we need to modify `LibraryManagedAttributes` too,
-     * to make `className` props optional when `css` props is specified?
-     */
-
-    interface IntrinsicAttributes {
-      css?: InterpolationWithTheme<any>
-    }
-  }
-}

Suggest changes to this page ➚