title: Extend material-ui component in typescript
body: <p>Trying to extend the Material-ui Button component to add new props.</p>
  <p>Purpose is to add a new prop: <code>fontSize</code> which has three options - <code>small</code>, <code>medium</code>, <code>large</code>.</p>
  <blockquote>
  <pre><code>&lt;Button variant=&quot;outlined&quot; color=&quot;primary&quot; fontSize=&quot;small&quot;&gt;
      button_small
  &lt;/Button&gt;
  </code></pre>
  </blockquote>
  <p>and to use it in css to make the required changes.</p>
  <p>As per the material ui documentation for <a href="https://material-ui.com/guides/typescript/#typescript" rel="nofollow noreferrer">typescript theme customisation</a>, I have already customised the theme and it works fine.</p>
  <p>Only problem is trying to update the prop types for Button doesn't work.</p>
  <p>And I get this error for no overload match which is obvious because material ui Button component doesn't know about the &quot;fontSize&quot; new props.</p>
  <blockquote>
  <p>error TS2769: No overload matches this call.</p>
  <p>Overload 1 of 3, '(props: { href: string; } &amp; { children?: ReactNode;
  color?: Color | undefined; disabled?: boolean | undefined;
  disableElevation?: boolean | undefined; disableFocusRipple?: boolean |
  undefined; ... 5 more ...; variant?: &quot;text&quot; | ... 2 more ... |
  undefined; } &amp; { ...; } &amp; CommonProps&lt;...&gt; &amp; Pick&lt;...&gt;): Element',
  gave the following error. Type '{ children: string; variant:
  &quot;outlined&quot;; color: &quot;primary&quot;; fontSize: string; }' is not assignable
  to type 'IntrinsicAttributes &amp; { href: string; } &amp; { children?:
  ReactNode; color?: Color | undefined; disabled?: boolean | undefined;
  disableElevation?: boolean | undefined; ... 6 more ...; variant?:
  &quot;text&quot; | ... 2 more ... | undefined; } &amp; { ...; } &amp; CommonProps&lt;...&gt; &amp;
  Pick&lt;...&gt;'. Property 'fontSize' does not exist on type
  'IntrinsicAttributes &amp; { href: string; } &amp; { children?: ReactNode;
  color?: Color | undefined; disabled?: boolean | undefined;
  disableElevation?: boolean | undefined; ... 6 more ...; variant?:
  &quot;text&quot; | ... 2 more ... | undefined; } &amp; { ...; } &amp; CommonProps&lt;...&gt; &amp;
  Pick&lt;...&gt;'.</p>
  <p>Overload 2 of 3, '(props: { component: ElementType; } &amp; {
  children?: ReactNode; color?: Color | undefined; disabled?: boolean |
  undefined; disableElevation?: boolean | undefined; ... 6 more ...;
  variant?: &quot;text&quot; | ... 2 more ... | undefined; } &amp; { ...; } &amp;
  CommonProps&lt;...&gt; &amp; Pick&lt;...&gt;): Element', gave the following error.
  Property 'component' is missing in type '{ children: string; variant:
  &quot;outlined&quot;; color: &quot;primary&quot;; fontSize: string; }' but required in
  type '{ component: ElementType; }'.</p>
  <p>Overload 3 of 3, '(props:
  DefaultComponentProps&lt;ExtendButtonBaseTypeMap&lt;ButtonTypeMap&lt;{},
  &quot;button&quot;&gt;&gt;&gt;): Element', gave the following error. Type '{ children:
  string; variant: &quot;outlined&quot;; color: &quot;primary&quot;; fontSize: string; }' is
  not assignable to type 'IntrinsicAttributes &amp; { children?: ReactNode;
  color?: Color | undefined; disabled?: boolean | undefined;
  disableElevation?: boolean | undefined; ... 6 more ...; variant?:
  &quot;text&quot; | ... 2 more ... | undefined; } &amp; { ...; } &amp; CommonProps&lt;...&gt; &amp;
  Pick&lt;...&gt;'. Property 'fontSize' does not exist on type
  'IntrinsicAttributes &amp; { children?: ReactNode; color?: Color |
  undefined; disabled?: boolean | undefined; disableElevation?: boolean
  | undefined; ... 6 more ...; variant?: &quot;text&quot; | ... 2 more ... |
  undefined; } &amp; { ...; } &amp; CommonProps&lt;...&gt; &amp; Pick&lt;...&gt;'.</p>
  </blockquote>
  <p>Attempt 1:
  Following the answer from <a href="https://stackoverflow.com/a/46175082/2860486">this stack-overflow question</a>  I tried to redeclare the Button, but it throws a typescript error (<a href="https://github.com/Microsoft/TypeScript/issues/17547" rel="nofollow noreferrer">https://github.com/Microsoft/TypeScript/issues/17547</a>) which seems to be unresolved.</p>
  <pre><code>declare module '@material-ui/core' {
      export interface MyButtonProps {
          fontSize: 'small' | 'medium' | 'large';
      }
      export class Button extends StyledComponent&lt;ButtonProps &amp; MyProps&gt; {
      }
  }
  </code></pre>
  <p>Attempt2:
  Trying to overwrite the ButtonTypeMap instead of the Button but that doesn't help either.</p>
  <pre><code>declare module '@material-ui/core/Button' {
      export type ButtonTypeMap&lt;P = {}, D extends React.ElementType&lt;any&gt; = &quot;button&quot;&gt; = ExtendButtonBaseTypeMap&lt;{
          props: P &amp; {
              children?: React.ReactNode;
              color?: CustomColors;
              disabled?: boolean;
              disableElevation?: boolean;
              disableFocusRipple?: boolean;
              endIcon?: React.ReactNode;
              fullWidth?: boolean;
              href?: string;
              size?: 'small' | 'medium' | 'large';
              startIcon?: React.ReactNode;
              variant?: 'text' | 'contained';
              fontSize: 'small' | 'medium' | 'large';
          };
          defaultComponent: D;
          classKey: ButtonClassKey;
      }&gt;
      // The next line throws error with 'Button' is already declared in the upper scope
      // declare const Button: ExtendButtonBase&lt;ButtonTypeMap&gt;;
  }
  </code></pre>
  <p>Versions:</p>
  <p>typescript: <code>4.2.4</code></p>
  <p>@material-ui/core: <code>4.11.4</code></p>
  <p>Edit: There are a few answers here (<a href="https://stackoverflow.com/a/65344567/2860486">https://stackoverflow.com/a/65344567/2860486</a>) which adds a Custom HOC which extends material-ui component to achieve desired behaviour but I want to overwrite the material UI component itself just to be consistent with importing component from &quot;<code>material-ui</code>&quot; not from my local custom-component folder.</p>
  <p>Edit 2: I was lucky to migrate the project from version 4 to version 5 where this problem has been solved already. If you're stuck at version 4 (and upgrade is not an option) then adding a HOC is your best option.</p>