How to override className on extended component?
<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>