emotion: TS2322: Property 'css' does not exist...

For Emotion 11 use the following configuration in your tsconfig.json until TypeScript 4.1 comes out:

{
  "compilerOptions": {
    "types": ["@emotion/react/types/css-prop"]
  }
}

Documentation: https://emotion.sh/docs/emotion-11#css-prop-types

TL;DR: for React 17, Typescript 4.2, Emotion 11.1

tsconfig.json

{
  "compilerOptions": {
    ...
    "jsx": "react-jsx",
    "jsxImportSource": "@emotion/react",
    ...
  }
}

This seems to be the cleanest solution that works for me that does NOT require:

1. adding a /// <reference types="@emotion/react/types/css-prop" /> to a .d.ts file
2. adding a /** @jsxImportSource @emotion/react */ with any imports

See: Emotion TypeScript css prop docs

Additional Context:

Prior comments and the Emotion 11 docs linked in prior comments seemed to suggest that upgrading to a version of TypeScript > 4.1 would somehow resolve this issue (and by “resolve” I presumed this would mean removing the need for either the suggested tsconfig.json changes, or the other change suggested by a few others above on adding a /// <reference types="@emotion/react/types/css-prop" /> line in some .d.ts file in your codebase. Unfortunately this doesn’t seem to be case.

I fixed this by changing my tsconfig.json to:

{
  "compilerOptions": {
    "types": ["@emotion/core"]
  }
}

For me, it was adding /// <reference types="@emotion/react/types/css-prop" /> to next-env.d.ts file. See https://emotion.sh/docs/emotion-11#css-prop-types

See https://github.com/UnlyEd/next-right-now/commit/2a3c89dad00cf212929a54b8d4bb2d14f0677af5

For Emotion 11 use the following configuration in your tsconfig.json until TypeScript 4.1 comes out:

{
  "compilerOptions": {
    "types": ["@emotion/react/types/css-prop"]
  }
}

Documentation: https://emotion.sh/docs/emotion-11#css-prop-types

thanks that worked for me!

React 17 with Typescript 4.2 and Emotion.js 11.1 setup

Just add the following line to react-app-env.d.ts as stated in https://emotion.sh/docs/emotion-11 /// <reference types="@emotion/react/types/css-prop" />

and import with

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react'

in tsconfig.json make shure to have "jsx": "react-jsx"

If it helps somehow, you can create custom type declaration like next one

// @types/react/index.d.ts
declare module "react" {
  interface Attributes {
      css?: any;
  }
}

and specify in typeRoots: ['./@types', './node_modules/@types'], order matters!

Are there any updates on this issue? I am still getting this problem. Is a special tsconfig required?

Edit: It work with a basic create-react-app setup, but it stops working, when I am importing an npm package, which includes emotion components. Sadly I don’t have deep enough knowledge of emotion or typescript to make something about that.

Ran into the same issue. If you have already tried @nhooyr 's solution and still get errors. The next step would be a fresh install of dependencies. (npm install or yarn install). If that doesn’t work, try nuking (deleting) the node_modules folder and do a fresh reinstall then reload your IDE / text editor

Or update this npm install --save @emotion/css

{
  "compilerOptions": {
    "types": ["@emotion/react/types/css-prop"]
  }
}

This is work for me without error.

@SRochas Please always try to share a repro case in a runnable form - either by providing a git repository to clone or a codesandbox. OSS maintainers usually can’t afford the time to set up the repro, even if exact steps are given.

What do you do if you’re already using typeRoots in tsconfig.json, which isn’t compatible with types?