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

user_10320683 0
Viewed 3220

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

material-ui typescript reactjs javascript
1 Answers

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