title: Styled Component ReferenceError: Cannot access 'Component' before initialization
body: <p>While Referencing another component in the styled Component I am getting this error</p>
  <blockquote>
  <p>ReferenceError: Cannot access 'SiteHeader' before initialization</p>
  </blockquote>
  <p>here is the code</p>
  <pre><code>//Common.ts
  
  import styled from 'styled-components/macro';
  import { SiteHeader } from '../Theme/Layout/Header';
  
  export const Container = styled.div`
      padding: 0 15px;
      ${SiteHeader} &amp; {
          padding-top: 20px;
          padding-bottom: 20px;
      }
  `;
  
  </code></pre>
  <pre><code>//header.tsx
  
  import { Container } from '../../Styles/Common';
  import styled from 'styled-components/macro';
  
  export default function Header(): JSX.Element {
      return (
          &lt;SiteHeader&gt;
              &lt;Container&gt;
                  {/*navigation*/}
              &lt;/Container&gt;
          &lt;/SiteHeader&gt;
      );
  }
  
  export const SiteHeader = styled.header`
      background: var(--green-kelp);
  `;
  
  </code></pre>