title: How do you properly extend Material UI button in TypeScript?
body: <p>Almost everything works here except props aren't getting passed through correctly. I'm new to TypeScript so I know I'm definitely getting some stuff wrong here. Just can't quite get it sorted out.</p>
  
  <p><strong>Custom Link Button Attempt 1</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>const LoginSignupButton = withStyles({
    root: {
      color: rgba(Colors.white, 0.5),
      backgroundColor: rgba(Colors.white, 0.05),
      "&amp;:hover": {
        color: rgba(Colors.white, 0.75),
        backgroundColor: rgba(Colors.white, 0.2)
      }
    }
  })(Button);
  
  export default LoginSignupButton;
  </code></pre>
  
  <p><strong>Usage 1</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;LoginSignupButton component={Link} to={"/register"} fullWidth&gt;
    Sign up for a free trial
  &lt;/LoginSignupButton&gt;
  </code></pre>
  
  <p><strong>Error 1</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>Overload 1 of 2, '(props: Pick&lt;DefaultComponentProps&lt;ExtendButtonBaseTypeMap&lt;ExtendButtonBaseTypeMap&lt;{ props: { color?: "inherit" | "default" | "primary" | "secondary" | undefined; disableFocusRipple?: boolean | undefined; endIcon?: ReactNode; fullWidth?: boolean | undefined; href?: string | undefined; size?: "medium" | ... 2 more ... | undefined; startIcon?: ReactNode; variant?: "text" | ... 2 more ... | undefined; }; defaultComponent: "button"; classKey: ButtonClassKey; }&gt;&gt;&gt;, "title" | ... 281 more ... | "variant"&gt; &amp; StyledComponentProps&lt;...&gt;, context?: any): ReactElement&lt;...&gt; | ... 1 more ... | null', gave the following error.
      Type '{ children: string; component: OverridableComponent&lt;LinkTypeMap&lt;{}, "a"&gt;&gt;; to: string; className: string; fullWidth: true; }' is not assignable to type 'IntrinsicAttributes &amp; Pick&lt;DefaultComponentProps&lt;ExtendButtonBaseTypeMap&lt;ExtendButtonBaseTypeMap&lt;{ props: { color?: "inherit" | "default" | "primary" | "secondary" | undefined; disableFocusRipple?: boolean | undefined; endIcon?: ReactNode; fullWidth?: boolean | undefined; href?: string | undefined; size?: "medium" |...'.
        Property 'component' does not exist on type 'IntrinsicAttributes &amp; Pick&lt;DefaultComponentProps&lt;ExtendButtonBaseTypeMap&lt;ExtendButtonBaseTypeMap&lt;{ props: { color?: "inherit" | "default" | "primary" | "secondary" | undefined; disableFocusRipple?: boolean | undefined; endIcon?: ReactNode; fullWidth?: boolean | undefined; href?: string | undefined; size?: "medium" |...'.
    Overload 2 of 2, '(props: PropsWithChildren&lt;Pick&lt;DefaultComponentProps&lt;ExtendButtonBaseTypeMap&lt;ExtendButtonBaseTypeMap&lt;{ props: { color?: "inherit" | "default" | "primary" | "secondary" | undefined; disableFocusRipple?: boolean | undefined; endIcon?: ReactNode; fullWidth?: boolean | undefined; href?: string | undefined; size?: "medium" | ... 2 more ... | undefined; startIcon?: ReactNode; variant?: "text" | ... 2 more ... | undefined; }; defaultComponent: "button"; classKey: ButtonClassKey; }&gt;&gt;&gt;, "title" | ... 281 more ... | "variant"&gt; &amp; StyledComponentProps&lt;...&gt;&gt;, context?: any): ReactElement&lt;...&gt; | ... 1 more ... | null', gave the following error.
      Type '{ children: string; component: OverridableComponent&lt;LinkTypeMap&lt;{}, "a"&gt;&gt;; to: string; className: string; fullWidth: true; }' is not assignable to type 'IntrinsicAttributes &amp; Pick&lt;DefaultComponentProps&lt;ExtendButtonBaseTypeMap&lt;ExtendButtonBaseTypeMap&lt;{ props: { color?: "inherit" | "default" | "primary" | "secondary" | undefined; disableFocusRipple?: boolean | undefined; endIcon?: ReactNode; fullWidth?: boolean | undefined; href?: string | undefined; size?: "medium" |...'.
        Property 'component' does not exist on type 'IntrinsicAttributes &amp; Pick&lt;DefaultComponentProps&lt;ExtendButtonBaseTypeMap&lt;ExtendButtonBaseTypeMap&lt;{ props: { color?: "inherit" | "default" | "primary" | "secondary" | undefined; disableFocusRipple?: boolean | undefined; endIcon?: ReactNode; fullWidth?: boolean | undefined; href?: string | undefined; size?: "medium" |...'. 
  </code></pre>
  
  <p><strong>Custom Link Button Attempt 2</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>class LinkButton extends React.Component&lt;ButtonProps &amp; LinkProps&gt; {
    public render() {
      return &lt;Button component={Link} {...this.props} /&gt;;
    }
  }
  
  const LoginSignupButton = withStyles({
    root: {
      color: rgba(Colors.white, 0.5),
      backgroundColor: rgba(Colors.white, 0.05),
      "&amp;:hover": {
        color: rgba(Colors.white, 0.75),
        backgroundColor: rgba(Colors.white, 0.2)
      }
    }
  })(LinkButton);
  
  export default LoginSignupButton;
  </code></pre>
  
  <p><strong>Usage 2</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;LoginSignupButton to={"/register"} fullWidth&gt;
    Sign up for a free trial
  &lt;/LoginSignupButton&gt;
  </code></pre>
  
  <p><strong>Error 2</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>Overload 1 of 2, '(props: Pick&lt;{ action?: ((instance: ButtonBaseActions | null) =&gt; void) | RefObject&lt;ButtonBaseActions&gt; | null | undefined; buttonRef?: ((instance: unknown) =&gt; void) | RefObject&lt;unknown&gt; | null | undefined; ... 7 more ...; TouchRippleProps?: Partial&lt;...&gt; | undefined; } &amp; ... 7 more ... &amp; Pick&lt;...&gt;, "color" | ... 296 more ... | "TypographyClasses"&gt; &amp; StyledComponentProps&lt;...&gt;, context?: any): ReactElement&lt;...&gt; | ... 1 more ... | null', gave the following error.
      Type '{ children: string; to: string; className: string; fullWidth: true; }' is not assignable to type 'IntrinsicAttributes &amp; Pick&lt;{ action?: ((instance: ButtonBaseActions | null) =&gt; void) | RefObject&lt;ButtonBaseActions&gt; | null | undefined; buttonRef?: ((instance: unknown) =&gt; void) | RefObject&lt;...&gt; | null | undefined; ... 7 more ...; TouchRippleProps?: Partial&lt;...&gt; | undefined; } &amp; ... 7 more ... &amp; Pick&lt;...&gt;, "color" |...'.
        Property 'to' does not exist on type 'IntrinsicAttributes &amp; Pick&lt;{ action?: ((instance: ButtonBaseActions | null) =&gt; void) | RefObject&lt;ButtonBaseActions&gt; | null | undefined; buttonRef?: ((instance: unknown) =&gt; void) | RefObject&lt;...&gt; | null | undefined; ... 7 more ...; TouchRippleProps?: Partial&lt;...&gt; | undefined; } &amp; ... 7 more ... &amp; Pick&lt;...&gt;, "color" |...'.
  Overload 2 of 2, '(props: PropsWithChildren&lt;Pick&lt;{ action?: ((instance: ButtonBaseActions | null) =&gt; void) | RefObject&lt;ButtonBaseActions&gt; | null | undefined; buttonRef?: ((instance: unknown) =&gt; void) | RefObject&lt;unknown&gt; | null | undefined; ... 7 more ...; TouchRippleProps?: Partial&lt;...&gt; | undefined; } &amp; ... 7 more ... &amp; Pick&lt;...&gt;, "color" | ... 296 more ... | "TypographyClasses"&gt; &amp; StyledComponentProps&lt;...&gt;&gt;, context?: any): ReactElement&lt;...&gt; | ... 1 more ... | null', gave the following error.
      Type '{ children: string; to: string; className: string; fullWidth: true; }' is not assignable to type 'IntrinsicAttributes &amp; Pick&lt;{ action?: ((instance: ButtonBaseActions | null) =&gt; void) | RefObject&lt;ButtonBaseActions&gt; | null | undefined; buttonRef?: ((instance: unknown) =&gt; void) | RefObject&lt;...&gt; | null | undefined; ... 7 more ...; TouchRippleProps?: Partial&lt;...&gt; | undefined; } &amp; ... 7 more ... &amp; Pick&lt;...&gt;, "color" |...'.
        Property 'to' does not exist on type 'IntrinsicAttributes &amp; Pick&lt;{ action?: ((instance: ButtonBaseActions | null) =&gt; void) | RefObject&lt;ButtonBaseActions&gt; | null | undefined; buttonRef?: ((instance: unknown) =&gt; void) | RefObject&lt;...&gt; | null | undefined; ... 7 more ...; TouchRippleProps?: Partial&lt;...&gt; | undefined; } &amp; ... 7 more ... &amp; Pick&lt;...&gt;, "color" |...'.
  </code></pre>
  
  <p>Either way the error is similar. I just can't figure out how to take care of it as I'm still pretty new to TypeScript.</p>