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 ponent, both in a separate typings file (.d.ts) and in the react ponent 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 ponent itself, piler just plains 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 ponent type definitions in material-ui (v3.0.2).

Thank you & Cheers

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 ponent, both in a separate typings file (.d.ts) and in the react ponent 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 ponent itself, piler just plains 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 ponent type definitions in material-ui (v3.0.2).

Thank you & Cheers

• javascript
• reactjs
• typescript
• material-ui

1 Answer 1

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

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