title: How to override className on extended component?
body: <p>I am trying to position this component differently on a certain page. But when I provide it with another className property it is only using the original class's styling that was provided when declaring the component. </p>
  
  <p>Component: </p>
  
  <pre><code>import React, { Component } from 'react';
  import styles from './label.css';
  
  class Label extends Component {
    render() {
      return (
        &lt;div className={styles.labelClass} /&gt;
      );
    }
  }
  
  export default Label;
  </code></pre>
  
  <p>Page where I want to position it differently: </p>
  
  <pre><code>import React, { Component } from 'react';
  import styles from './page.css';
  import Label from '../common/label.jsx';
  
  class Page extends Component {
  
    render() {
      return (
        &lt;div&gt;
            &lt;Label className={styles.positionLeft} /&gt;
        &lt;/div&gt;
      );
    }
  
  }
  
  export default Page;
  </code></pre>
  
  <p><strong>Normally I would do this with custom styling but I have to use media
     queries so this isn't possible in this situation.</strong></p>