title: Stopping props to be passed on to child with styled-components
body: <p>I'm playing with <code>styled-components</code> for the first time, and I'm having an issue with ´react` passing on props only used by the styled component itself.</p>
  
  <p>Here's my component:</p>
  
  <pre><code>import { Link } from 'react-router-dom';
  
  const CtaButton = styled(Link)`
    background: ${props =&gt; props.primary ? 'red' : 'yellow'}
    color: white;
    display: inline-block;
    padding: 0.5em 1em;
  `;
  </code></pre>
  
  <p>When I invoke this with the <code>primary</code> prop, I get a warning from <code>react</code> that I'm applying the <code>primary</code> prop to the <code>&lt;a /&gt;</code> element. I understand why this happens - but how can I stop it? </p>
  
  <p>I can of course create a wrapper around <code>react-router</code>'s <code>Link</code> component that strips this prop - but that would be kind of clumsy. I'm sure it's just me not being a pro in this lib's API yet - so can somebody please point me in the right direction?</p>
  
  <p>For some reason I don't have this issue when I create DOM component directly (<code>styled.a</code> for instance).</p>