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

Activity

1. yinsang commented on Jul 22, 2021

   

   yinsang

   on Jul 22, 2021

   Last edited by yinsang

   More actions

   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;
     }
   }

   👍React with 👍6Reacted by Gajus Kuizinas, Thomas Fisher, 54sword, weixu, 阿星 and Vito Madio
2. Anatoool commented on Aug 26, 2021

   

   Anatoool

   on Aug 26, 2021

   More actions

   I have the same issue with "@types/react-css-modules": "^4.6.4",
3. max-mykhailenko commented on Feb 21, 2023

   

   max-mykhailenko

   on Feb 21, 2023

   More actions

   @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
4. leevben commented on Apr 29, 2024

   

   leevben

   on Apr 29, 2024

   Last edited by leevben

   More actions

   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"