title: Styled-components: Override component style inside a new component
body: <p>I am trying to override the style of a component inside another component.</p>
  
  <p>So, I have a component A, with some div's inside(Wrapper, Header).
  In a new component, I am trying to override component A. Inside that override I want some new styling to the Header component. I know I can reference a component inside the same component but I can't find any info about referencing inside a new component.</p>
  
  <pre><code>// Component A
  import React from "react";
  
  export default ({
    className,
    title
  }) =&gt; (
      &lt;Wrapper className={className}&gt;
        &lt;Header&gt;{title}&lt;/Header&gt;
      &lt;/Wrapper&gt;
    )
  );
  
  const Header = styled.h2`
    padding-left: 0;
  `;
  
  // Component B
  import React from "react";
  
  export default () =&gt; (
      &lt;CustomA&gt;
        /* content */
      &lt;/CustomA&gt;
    )
  );
  
  const CustomA = styled(&lt;A /&gt;)`
    ${Header} {
      padding-left: 20px;
    }
  `;
  </code></pre>
  
  <p>I expect Header to be changed but I get "Header is not defined".</p>