title: Overriding react components styles with styled component
body: <p>I tried to override style of component created by standard way of styled-components(styled.) and both the ways(<code>styled()</code> and <code>style.extends</code>) worked for me. </p>
  
  <p>But when I am trying to override style of simple react component with <code>styled()</code> approach, its rendering the component but not overriding it's style.</p>
  
  <p>Below is snippet of code</p>
  
  <pre><code>import React, { Component } from "react";
  import styled from "styled-components";
  
  export default class MyLabel extends Component {
    render() {
      return &lt;label&gt;{this.props.children}&lt;/label&gt;;
    }
  }
  
  const StyledMyLabel = styled(MyLabel)`
      color: green;
  `;
  </code></pre>
  
  <p>And for display purpose I am using following syntax</p>
  
  <pre><code>&lt;StyledMyLabel&gt;My Styled Label&lt;/StyledMyLabel&gt;
  </code></pre>
  
  <p>Please refer the <a href="https://codesandbox.io/s/zlv5o3l9yp" rel="noreferrer">link on codesandbox</a> which might be useful</p>