title: React - styled-components, props, and TypeScript
body: <p>I looking into styled-components and trying the examples from the website but I also wanted to use TypeScript.</p>
  <p>I have this simple example here</p>
  <pre><code>import React from 'react';
  import './App.css';
  import styled from 'styled-components';
  
  interface IProps{
    primary: boolean
  }
  
  const App:React.FC&lt;IProps&gt; = ({primary}) =&gt; {
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;h1&gt;Styled Components&lt;/h1&gt;
  
        &lt;Button&gt;Normal&lt;/Button&gt;
        &lt;Button primary&gt;Primary&lt;/Button&gt;
      &lt;/div&gt;
    );
  }
  
  const Button = styled.button`
    background: ${props =&gt; props.primary ? 'red' : 'white'};
    color: ${props =&gt; props.primary ? 'white' : 'red'};
    font-size: 1em;
    margin: 1em;
    padding: 0.25em 1em;
    border: 1px solid green;
    border-radius: 3px;
  `
  
  export default App;
  </code></pre>
  <p>but I'm getting errors on the primary prop</p>
  <p>I getting the error</p>
  <pre><code>Property 'primary' does not exist on type 'ThemedStyledProps&lt;Pick&lt;DetailedHTMLProps&lt;ButtonHTMLAttributes&lt;HTMLButtonElement&gt;, HTMLButtonElement&gt;, &quot;form&quot; | ... 264 more ... | &quot;onTransitionEndCapture&quot;&gt; &amp; { ...; }, any&gt;'
  </code></pre>
  <p>Ho can I use styled-components with TypeScript?</p>