`babel-plugin-react-css-modules` Typescript Type Checking

Question

I am using babel-plugin-react-css-modules . It add the styleName property to HTML elements. Typescript doesn't recognize this property. I am pretty sure I need to extend something but nothing I have tried has worked.

I have tried declaring an Element in a '.d.ts' file to do declaration merging but I must be doing something wrong.

interface Element {
    styleName: string;
}

export const Wrapper: React.FC<IWrapperProps> = ({ children, style }) => (
  <div styleName="wrapper" style={style}>
    {children}
  </div>
);

UPDATE:

.d.ts not working

Answer 1

Since you're in a module (it has an export), you're working with a separate scope from the global scope - so you're just creating an interface named Element that's separate from the global declaration.

I'd place the interface in a separate file with no exports/imports ( augmentations.d.ts ) and add that to your tsconfig.json .

Answer 2

将@types/react-css-modules到您的package.json和styleName将被识别：

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