CODEWITHSUNDEEP
javascriptreactjstypescriptwebpackreact-css-modules
fariyAhill
fariyAhill

Reputation: 31

Property 'styleName' does not exist on type 'HTMLProps<HTMLDivElement>'

I tried to use react-css-modules in typescript,But I got an error message that can't add styleName to a div element.Here is the code.

import * as Immutable from 'immutable';
import * as React from 'react';
import * as  CSSModules from 'react-css-modules';
import { connect } from 'react-redux';
import { bindActionCreators, Dispatch } from 'redux';
const styles = require<any>('./style.scss');

interface RootProps {
    data: Immutable.List<string>;
    dispatch: Dispatch<any>;
}

@CSSModules(styles)
export class Root extends React.Component<RootProps, {}>{
    render() {
        return (
            <div styleName='root'>
              Hello
            </div>
        )
    }
}


export default connect(mapStateToProps, mapDispatchToProps)(Root);

I got this error message:'Property 'styleName' does not exist on type 'HTMLProps<HTMLDivElement>'

And tsconfig

"compilerOptions": {
    "target": "es5",
    "moduleResolution": "node",
    "jsx": "react",
    "experimentalDecorators": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "allowSyntheticDefaultImports": true,
    "allowJs": true,
    "sourceMap": true,
}

Upvotes: 3

Views: 5254

Answers (3)

evenfrost
evenfrost

Reputation: 415

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

Upvotes: 0

Abdul Rehman
Abdul Rehman

Reputation: 47

I using VSCode IDE i just changed my Type Script version of Work Space not the IDE version.

Upvotes: 0

Vishal
Vishal

Reputation: 445

Use @types/react-css-modules.

npm install --save-dev @types/react-css-modules

Or,

yarn add @types/react-css-modules --dev

Upvotes: 9

Related Questions