Definitelytyped: @types/react-css-modules: Property 'styleName' does not exist in type 'HTMLProps<HTMLElement>'

[empz]

Using the latest @types/react-css-modules: 3.7.4 with TypeScript 2.0.3 and React 15.3.2 results in unrecognized styleName property.

error TS2339: Property 'styleName' does not exist on type 'HTMLProps<HTMLElement>'.

I was using this custom definition and it worked fine before @types 2.0.

declare module 'react-css-modules' {
    interface Options {
        allowMultiple?: boolean;
        errorWhenNotFound?: boolean;
    }

    module Decorator {
        interface Props {
            styles?: any;
            styleName?: string;
        }
    }

    interface Decorator {
        (defaultStyles: any, options?: Options): any;
    }

    const Decorator: Decorator;

    export default Decorator;
}

[skirsdeda]

@emzero being solved in #12184.

[mcrawshaw]

@emzero, merged, please close.

[AlvinYuXT]

I have the same problem with @types/react-css-modules version 4.6.2

[evenfrost]

If anyone stumbles upon same error when using preact, add preact.d.ts file in your /types directory with following content:

import preact from 'preact';

declare global {
  namespace JSX {
    interface HTMLAttributes {
      styleName?: string;
    }

    interface SVGAttributes {
      styleName?: string;
    }
  }
}

[JohnForster]

@evenfrost
When I create a types/preact.d.ts file with that content I'm now getting the error

JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.

Any ideas? Is this overwriting an existing preact.d.ts file perhaps?

[evenfrost]

@JohnForster works good for me. Maybe some missing/misconfigured Preact-related typings?

[evenfrost]

An update for TypeScript 3.7:

// {project_root}/types/preact.d.ts
declare namespace preact {
  namespace JSX {
    interface HTMLAttributes {
      styleName?: string;
    }

    interface SVGAttributes {
      styleName?: string;
    }
  }
}

And in your tsconfig there should be proper compilerOptions.typeRoots property to catch up your declarations folder:

{
  "compilerOptions": {
    "typeRoots": [
      "./node_modules/@types",
      "./types"
    ]
  }
}

[mitayou]

https://stackoverflow.com/questions/43017033/property-stylename-does-not-exist-on-type-htmlpropshtmldivelement

[EmiyaYang]

This works for me.

// global.d.ts
import 'react';

declare module 'react' {
  interface Attributes {
    styleName?: string;
  }
}