属性"styleName"在类型"HTMLProps"上不存在<HTMLDivElement>

Question

我尝试在打字稿中使用 react-css-modules，但我收到一条错误消息，无法将 styleName 添加到div 元素。这是代码。

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

我收到此错误消息：'Property 'styleName' does not exist on type 'HTMLProps<HTMLDivElement>'

和 tsconfig

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

Answer 1

使用 @types/react-css-modules。

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

或

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

Answer 2

我使用VSCode IDE，我只是更改了工作空间的类型脚本版本，而不是IDE版本。

Answer 3

如果有人在使用 preact 时偶然发现相同的错误，请在/types 目录中添加preact.d.ts包含以下内容的文件：

import preact from 'preact';
declare global {
  namespace JSX {
    interface HTMLAttributes {
      styleName?: string;
    }
    interface SVGAttributes {
      styleName?: string;
    }
  }
}