title: Override styled-components in React
body: <p>I'm trying to find a way to override a styled component with styled-components like this:</p>
  
  <p>Let's say I have a reusable component Wrapper:</p>
  
  <pre><code>class Wrapper extends Component {
  
    ...
  
    render() {
      const Wrap = styled.div`
        padding: 5px;
        background-color: green;
      `;
      return (
         &lt;Wrap&gt;
           {children}
         &lt;/Wrap&gt;
      )
    }
  }
  
  export default Wrapper
  </code></pre>
  
  <p>And then I have Component B that imports Wrapper but should extend the styles like this: <em>myNewWrap uses Wrapper</em></p>
  
  <pre><code>import Wrapper from './Wrapper'
  
  class B extends Component {
  
    ...
  
    render() {
      const myNewWrap = styled(Wrapper)`
        background-color: red;
      `;
      return (
         &lt;myNewWrap&gt;
           Some awesome text
         &lt;/myNewWrap&gt;
      )
    }
  }
  </code></pre>
  
  <p>Result should be that <em>Some awesome text</em> has padding from Wrapper but background-color from own component. But what I get is only the styles from Wrapper.</p>