CODEWITHSUNDEEP
reactjstypescriptstyled-components
Gregoire Stevenard
Gregoire Stevenard

Reputation: 83

error TS2322: Property 'css' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'

I've recently decided to move my codebase from JS to TS to add Type checking. I also use the styled-components library.

However, i'm running into the following issue:

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

Here is a basic code example:

import React from 'react'
const MyComponent: React.FC = (props) => {
    return (
        <div css={`
            padding: 44px;
        `}>
            My content
        </div>
    )
}

Please note that my tsconfig.json compilerOptions look like this:

"compilerOptions": {
        "composite": true,
        "declaration": true,
        "outDir": "./dist", // https://www.typescriptlang.org/tsconfig#outFile
        "rootDir": "./src",
        "jsx":"react",
        "types": ["@types/styled-components"],
        "module": "commonjs",
        "target": "es5",
        "sourceMap": true,
        
        "declarationMap": true,
        "noEmitOnError": true,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "noUnusedLocals":true,
        "noUnusedParameters":true,
        "allowJs":true,
        "noEmit": false
    }

Can anyone point me in the right direction to solve the type of the css attribute ?

Upvotes: 7

Views: 11587

Answers (7)

DavGarcia
DavGarcia

Reputation: 18812

Getting the same error when trying to compile my tsx files. I found an unexpected solution on github. If using TypeScript, add this to tsconfig.json under compilerOptions:

 "jsxImportSource": "@emotion/react",

Since I'm using MUI v5, I already had a reference to @emotion/react in my package.json file.

And if using eslint, also add this to .eslintrc.js to avoid syntax errors in the IDE:

 "rules": {
   "react/no-unknown-property": ['error', { ignore: ['css'] }]
 }

With those changes, everything started working and I was able to use the css prop on a div in .tsx files.

Upvotes: 0

felix0808
felix0808

Reputation: 81

In emotion you can create the following cssTypes.d.ts

import { Interpolation } from '@emotion/react';

interface DefaultTheme {}

declare module 'react' {
  interface HTMLAttributes<T> extends DOMAttributes<T> {
    css?: Interpolation<DefaultTheme>;
  }
}

Upvotes: 0

reubennn
reubennn

Reputation: 470

If anyone is experiencing this issue while using emotion, see the equivalent type declaration module:

import type { SerializedStyles } from "@emotion/serialize";
import type { DOMAttributes } from "react";

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

Upvotes: 3

Britt
Britt

Reputation: 1

I did this in a similar, but slightly different way. I added a styled.d.ts file in the src/theme folder. You can also just put it straight in the src file if you're not using a theme.

Then I added the following code in this file:

import { CSSObject } from 'styled-components';
import { CSSProp } from 'styled-components';
declare module 'react' {
  interface Attributes {
    css?: CSSProp | CSSObject;
  }
}

Sources

Upvotes: 0

gildniy
gildniy

Reputation: 3943

Why not just add this line in the 'style.d.ts' file?

import {} from 'styled-components/cssprop'

Upvotes: 3

Gregoire Stevenard
Gregoire Stevenard

Reputation: 83

Thanks @jkaczmarkiewicz ! This works great. Updated it to :

import { CSSProp } from "styled-components";

interface DefaultTheme {}

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

In addition to the link you provided, this issue might help others too.

Upvotes: 1

jmk
jmk

Reputation: 1610

Create styledComponentsOverride.d.ts with following code inside:

import { CSSProp } from 'styled-components'

interface MyTheme {}

declare module 'react' {
    interface Attributes {
       css?: CSSProp<MyTheme>
    }
}

This will extend react element attributes types with optional CSS prop

more info: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31245

Upvotes: 6

Related Questions