What is the proper way to enable the css prop in Emotion 11/Next js 10 apps

Total
1
Shares

The css prop is not recognized at build time. I’m unsure if this is due to misconfiguration of the project, or if this represents a known bug.

Type ‘{ children: (string | number | boolean | {} | ReactElement<any, string | ((props: any) => ReactElement<any, string | … | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<…>)> | ReactNodeArray | ReactPortal | Element)[]; className: string; css: SerializedStyles; }’ is not assignable to type ‘IntrinsicAttributes & { theme?: Theme; as?: ElementType; } & ClassAttributes & HTMLAttributes<…> & { …; }’. Property ‘css’ does not exist on type ‘IntrinsicAttributes & { theme?: Theme; as?: ElementType; } & ClassAttributes & HTMLAttributes<…> & { …; }’

To reproduce:

https://github.com/jbcurrie/jbcurrie.github.io/tree/next

  1. npm install
  2. open NavMenu.tsx
  3. Inspect Line 18

Expected behavior:

The css prop should be recognized at build time.

Environment information:

  • react version: 17.0.1
  • next version: 10.0.5
  • @emotion/react version: 11.1.5

Solution

If using the automatic runtime, you should be able to fix the issue by adding the following to your tsconfig.json.

{
    "compilerOptions": {
        "jsxImportSource": "@emotion/react"
    }
}

Alternatively, add the following to your next-env.d.ts, which adds support for the css prop globally for all components, when not using the automatic runtime.

/// <reference types="@emotion/react/types/css-prop" />

Check Emotion’s TypeScript documentation for more details.

Leave a Reply

Your email address will not be published. Required fields are marked *