title: TypeScript: Extend React component props for styled component element
body: <p>i'm trying to extend a react components props in TypeScript so that it contains all the normal <code>html</code> button <code>attributes</code>, as well as react specific stuff like <code>ref</code> </p>
  
  <p>My understanding is that the type <code>React.HTMLProps</code> is what i need, (<code>React.HTMLAttributes</code> doesn't contain <code>ref</code>)</p>
  
  <p>However, when trying to pass my props to a <code>styled</code> component the compiler complains.</p>
  
  <p>My attempt  Codesandbox example: <a href="https://codesandbox.io/s/cocky-cohen-27cpw" rel="noreferrer">https://codesandbox.io/s/cocky-cohen-27cpw</a></p>
  
  <p><a href="https://i.stack.imgur.com/xiLHo.png" rel="noreferrer"><img src="https://i.stack.imgur.com/xiLHo.png" alt="enter image description here"></a></p>