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

[eugeneoshepkov]

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",

[yinsang]

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]

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

[max-mykhailenko]

@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]

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<T> {
    styleName?: string;
  }
  interface SVGAttributes<T> {
    styleName?: string;
  }
}

2. turn off this eslint rule

    "react/no-unknown-property": "off"