title: Using Flow for styled-components Props
body: <p>So I have been playing around with type systems in JavaScript and for the most part things are working however there is an issue with styled-components. I can't seem to find a good way to apply flow to the props of a styled-component. So far the only solution I see is:</p>
  
  <pre><code>export type ButtonPropTypes = ReactPropTypes &amp; {
    styleType: 'safe' | 'info' | 'warning' | 'danger' | 'link',
    isPill: boolean,
    isThin: boolean,
  };
  
  export const ButtonStyled = styled.button`
    ${generateBaseStyles}
    ${hoverStyles}
    ${fillStyles}
    ${thinStyles}
    ${linkStyles}
  `;
  
  export const Button = (props: ButtonPropTypes) =&gt; &lt;ButtonStyled {...props} /&gt;;
  </code></pre>
  
  <p>It seems pretty excessive that I have to create 2 component for every styled component.</p>
  
  <p>I am hoping my google skills are just crap and I am missing something but is there a better way to do this other than multiple components per styled component?</p>