title: How to extend(inherit) a global CSS class from within a styled-components
body: <p>Is it possible to inject a global CSS class into a <a href="https://www.styled-components.com/" rel="noreferrer"><code>styled-component</code></a>?</p>
  
  <p>Similar to extending in LESS using <code>&amp;:extend</code> or <code>@extend</code> in SASS.</p>
  
  <p>This code doesnt apply the <code>globalCSS</code> styles:</p>
  
  <pre><code>const extendedComponent = styled.div`
    &amp;:extend(.globalClass) // I want this component to inherit all styles of .globalaCSS
    .otherStyles {
      ...
    }
  `
  </code></pre>
  
  <p>The globalClass does exits and even applies styles when used inline:</p>
  
  <pre><code>extendedComponent(className="globalCSS)
  </code></pre>