title: How to properly extend a styled component using TypeScript
body: <p>As per styled-components v4, <code>.extend</code> is deprecated, the correct way to extend, or compose components is:</p>
  
  <pre><code>const ButtonA = styled('button')`color: ${props =&gt; props.color};`
  const ButtonB = styled(ButtonA)`background: 'white';`
  </code></pre>
  
  <p>However I can't find the correct way to do this with TS, as I get some errors, for example:</p>
  
  <pre><code>import styled from "styled-components";
  
  // Let's create ButtonA
  type ButtonAProps = { a: string };
  const ButtonA = styled&lt;ButtonAProps, "button"&gt;("button")`
    color: ${props =&gt; props.a};
  `;
  
  // So, here is what I've tried
  
  // Fail #1
  // =======
  type ButtonBProps = { b: string };
  const ButtonB = styled&lt;ButtonBProps, ButtonAProps&gt;(ButtonA)`
    background: ${props =&gt; props.b};
  `; // Here I get autocompletion only for B props :(
  const Test = () =&gt; &lt;ButtonB a="something" /&gt;; // And here I get autocompletion only for A props :(
  
  // Fail #2
  // =======
  type ButtonBProps = { b: string } &amp; ButtonAProps;
  const ButtonB = styled&lt;ButtonBProps, ButtonAProps&gt;(ButtonA)`
    background: ${props =&gt; props.b};
  `; //  Here I get autocompletion for A &amp; B props, good!
  const Test = () =&gt; &lt;ButtonB a="something" /&gt;; // Here I still get autocompletion only for A props :(
  
  // Fail #3
  // =======
  type ButtonBProps = { b: string } &amp; ButtonAProps;
  const ButtonB = styled&lt;ButtonBProps, ButtonBProps&gt;(ButtonA)` // Property 'b' is missing in type 'ButtonAProps', of course
    background: ${props =&gt; props.b};
  `; //  Here I get "props has implicitly any type"
  const Test = () =&gt; &lt;ButtonB /&gt;; // Here I don't get any type checking at all
  </code></pre>
  
  <p>Seems to be almost there, but can't figure it out.</p>
  
  <p>Any advices? Thank you!</p>