title: How to extend styled components?
body: <p>I have a styled component:</p>
  <pre class="lang-js prettyprint-override"><code>interface FlexContainerProps {
      children: any;
      className?: string;
  }
      
  function FlexContainer(props: FlexContainerProps) {
      const Container = styled.div`
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
      `;
      return (
          &lt;Container className={props.className}&gt;
              {props.children}
          &lt;/Container&gt;
      );
  }
  </code></pre>
  <p>I want to be able to extend it when I use it in components.</p>
  <p>The following does not work because the &quot;extended&quot; class has lower specificity (or is later in the code):</p>
  <pre class="lang-js prettyprint-override"><code>const FlexContainerExtended = styled(FlexContainer)`
      flex-direction: column-reverse;
  `;
  </code></pre>
  <p>The following works but is hacky:</p>
  <pre class="lang-js prettyprint-override"><code>const FlexContainerExtended = styled(FlexContainer)`
      flex-direction: column-reverse !important;
  `;
  </code></pre>
  <p>Is there another way to extend styled components?</p>