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

• emotion: version: 10.0.7
• emotion-theming: 10.0.7
• @emotion/core: version: 10.0.7
• @emotion/styled: version: 10.0.7
• @emotion/cache: version: 10.0.
• react version: 16.7.0
• typescript version: 3.2.4

Relevant code:

tsconfig.json:

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "allowUnreachableCode": false,
    "checkJs": false,
    "downlevelIteration": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "jsx": "preserve",
    "lib": ["webworker", "esnext", "dom"],
    "module": "esnext",
    "moduleResolution": "node",
    "noFallthroughCasesInSwitch": true,
    "noImplicitAny": false,
    "noImplicitReturns": true,
    "noImplicitThis": false,
    "noUnusedLocals": false,
    "outDir": "./build/",
    "pretty": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": false,
    "strictNullChecks": false,
    "suppressImplicitAnyIndexErrors": true,
    "target": "esnext",
    "types": ["@emotion/core", "jest", "node", "webpack-env"]
  },
  "include": ["./src/**/*", "./monaco.d.ts"],
  "exclude": [
    "node_modules",
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "gamma.config.js"
  ]
}

Example TS error:

 TS2322: Type '{ children: Element; css: SerializedStyles; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
Property 'css' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.

pragma

/** @jsx jsx */
import { jsx, css } from '@emotion/core'
import * as React from 'react'
...

Related Issues:

• https://github.com/emotion-js/emotion/issues/693

[JesseVelden]

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

[santyclaz]

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.