title: MUI styled component and TypeScript
body: <p>I have the following codes</p>
  <pre><code>import {Button,ButtonProps} from '@mui/material';
  import { alpha, styled } from '@mui/material/styles';
  import { Link as RouterLink } from 'react-router-dom';
  
  const BackButton = styled(Button)&lt;ButtonProps&gt;(({ theme }) =&gt; ({
    borderColor: alpha(theme.palette.text.primary, 0.5),
    padding: theme.spacing(1),
  }));
  </code></pre>
  <p>and</p>
  <pre><code>  const backButton = (
      &lt;BackButton
        to={'/my/path'}
        component={RouterLink}
        fullWidth
        variant=&quot;outlined&quot;
        color=&quot;inherit&quot;
      &gt;
        Back
      &lt;/BackButton&gt;
    );
  </code></pre>
  <p>I have a typescript error for <code>to</code> props, How can I fix it?</p>
  <pre><code>TS2322: Type '{ children: string; to: string; component: typeof Link; fullWidth: true; variant: &quot;outlined&quot;; color: &quot;inherit&quot;; }' is not assignable to type 'IntrinsicAttributes &amp; { children?: ReactNode; classes?: Partial&lt;ButtonClasses&gt;; color?: &quot;inherit&quot; | &quot;error&quot; | &quot;primary&quot; | &quot;secondary&quot; | &quot;success&quot; | &quot;info&quot; | &quot;warning&quot;; ... 9 more ...; variant?: &quot;text&quot; | ... 1 more ... | &quot;contained&quot;; } &amp; ... 4 more ... &amp; { ...; }'.   Property 'to' does not exist on type 'IntrinsicAttributes &amp; { children?: ReactNode; classes?: Partial&lt;ButtonClasses&gt;; color?: &quot;inherit&quot; | &quot;error&quot; | &quot;primary&quot; | &quot;secondary&quot; | &quot;success&quot; | &quot;info&quot; | &quot;warning&quot;; ... 9 more ...; variant?: &quot;text&quot; | ... 1 more ... | &quot;contained&quot;; } &amp; ... 4 more ... &amp; { ...; }'.
  </code></pre>