CODEWITHSUNDEEP
javascriptreactjstypescriptmaterial-ui
saltenhub
saltenhub

Reputation: 693

How to properly use typescript module augmentation for material-ui components?

I have read the existing answers here and here, but they seem to be outdated.

I have tried the following to augment the type definition for the button component, both in a separate typings file (.d.ts) and in the react component itself, but to no avail.

declare module "@material-ui/core/Button" {
  export interface ButtonProps {
    to?: string;  
  }
}

When put in the separate .d.ts file, I get a 'JSX element type 'Button' does not have any construct or call signatures.' error.

If put in the same file as the component itself, compiler just complains that property 'to' does not exist on type 'IntrinsicAttributes & ButtonProps & { children?: ReactNode; }' as if nothing was defined at all.

So I'm wondering about the current correct way to augment component type definitions in material-ui (v3.0.2).

Thank you & Cheers

Upvotes: 6

Views: 5189

Answers (1)

Matt McCutchen
Matt McCutchen

Reputation: 30879

The ButtonProps interface is actually declared in the @material-ui/core/Button/Button module. The following code in your component file should work:

declare module "@material-ui/core/Button/Button" {
  export interface ButtonProps {
    to?: string;  
  }
}

Upvotes: 6

Related Questions