search

gajus / babel-plugin-react-css-modules

Transforms styleName to className using compile time CSS module resolution.
Other
2.05k stars 162 forks source link

Typescript: styleName usage with @types/react@^17 #292

Open eugeneoshepkov opened 3 years ago

eugeneoshepkov commented 3 years ago

There's a problem with extending Attributes and HTMLAttributes interface with styleName with @types/react@^17. It simply has no effect:

Property 'styleName' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.

"@types/react-css-modules": "^4.6.2",

image

yinsang commented 2 years ago

add file to your project, named react-css-module.d.ts.

declare namespace React {
  interface Attributes {
    styleName?: string | undefined;
  }
  interface HTMLAttributes<T> {
    styleName?: string | undefined;
  }
  interface SVGAttributes<T> {
    styleName?: string | undefined;
  }
}
Anatoool commented 2 years ago

I have the same issue with "@types/react-css-modules": "^4.6.4",

max-mykhailenko commented 1 year ago

@yinsang your solution doesn't work with typescript 4.3.5 and react 17.0.2 Got Property 'styleName' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'

Maybe you have some thoughts how to fix that

leevben commented 2 months ago

This works for me(React@18.x)

  1. 
// global.d.ts
declare namespace JSX {
interface IntrinsicAttributes {
styleName?: string;
}

} declare namespace React { interface Attributes { styleName?: string; } interface HTMLAttributes { styleName?: string; } interface SVGAttributes { styleName?: string; } }


2. turn off this eslint rule
``` json
    "react/no-unknown-property": "off"