title: How to type attrs and styles props in styled components - React
body: <p>Styles:</p>
  
  <pre><code>interface BtnProps {
    variant: string;
    size: string;
    mr: number;
  }
  
  const Btn = styled(Button).attrs&lt;BtnProps&gt;(({ variant, size }) =&gt; ({
    forwardedAs: Link,
    size: size ?? 'md',
    variant: variant ?? 'primary'
  }))&lt;BtnProps&gt;`
    color: white;
    margin-right: ${({ mr }) =&gt; mr ?? '10px'};
    &amp;:hover {
      color: white;
    }
  `;
  </code></pre>
  
  <p>TypeScript doesn't check type of <code>mr</code> variable, i can put whatever i want in it.</p>