Using Flow for styled-components Props : <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>
