Property 'css' does not exist on type 'DetailedHTMLProps'

[CodingDive]

Hey, thank you all for this wonderful library.
I have recently adopted TypeScript and keep running into problems with the css prop. I couldn't find anything about my issue in the sc typescript docs. Any help is greatly appreciated.

Environment

## System:
 - OS: Windows 10
 - CPU: (4) x64 Intel(R) Core(TM) i5-4570 CPU @ 3.20GHz
 - Memory: 16.58 GB / 23.94 GB
## Binaries:
 - Node: 11.6.0 - C:\Program Files\nodejs\node.EXE
 - Yarn: 1.15.2 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
 - npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD
## package.json
 - "@types/styled-components": "4.1.14",
 - "typescript": "3.4.5",
 - "styled-components": "4.2.0",
 - "react": "16.8.6",
 - "react-dom": "16.8.6",
 - "react-scripts": "3.0.0",

Reproduction

https://codesandbox.io/s/6vp2yzj01k

Steps to reproduce

1. Use TypeScript with styled-components
2. Pass css prop to any React element

Expected Behavior

No type error

Actual Behavior

Type '{ children: (number | Element)[]; css: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.

  Property 'css' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.ts(2322)

[CodingDive]

Linking https://spectrum.chat/styled-components/help/css-prop-with-typescript~61a24960-8df6-48e5-bf25-046656a58b5c with @sami616's solution as seen in https://codesandbox.io/s/m48n2v0wwy by declaring an index.d.ts file.

Unfortunately, this didn't work in my actual project I assume because I'm using lerna + yarn workspaces.

I have a project structure like the following:

node_modules
packages
--Client
----index.d.ts
--DesignSystem
lerna.json
package.json

And inside my index.d.ts, I try to add the css prop like this

/// <reference path="../../node_modules/@types/react/index.d.ts"/>
import { DOMAttributes } from "react";

declare namespace React {
  interface HTMLAttributes<T> extends DOMAttributes<T> {
    css?: any;
  }
}

[quantizor]

Hey there, thanks for using styled-components but we don’t maintain the types here. For TS-specific questions I’d recommend DefinitelyTyped or some online help forum like SO or Spectrum

[peduarte]

[yuchi]

Apparently the problem lies in the fact that importing import {} from "styled-components/cssprop"; doesn’t resolve correctly on Yarn. Didn’t found the culprit, but found a solution. For everyone reaching this issue, you can extract all the content directly in a styled.d.ts (probably the same file where you define the theme shape):

import { CSSProp } from "styled-components";

declare module "styled-components" {
  export interface DefaultTheme {
    // Your theme stuff here
  }
}

declare module "react" {
  interface Attributes {
    css?: CSSProp;
  }
}

[0x80]

@yuchi Your solution worked for me. I had to reload VSCode before it got picked up.

The following also seems to work and appears more type correct to me:

declare module "react" {
  interface HTMLAttributes<T> extends DOMAttributes<T> {
    css?: CSSProp;
  }
}

[havenchyk]

solutions above worked, but seems order matters, so typeRoots: ['./typings', 'node_modules/@types'], typings go first

[omarryhan]

The above solution worked for me. But why isn't the css type included in @types/styled-components though?

[yuchi]

@omarryhan because it must be enabled specifically through the Babel Plugin or Babel Macro.

[tianhuil]

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

[gildniy]

Also adding this import {} from 'styled-components/cssprop' in the types file fixed that