title: React possible to change scss variable?
body: <p>Is it possible to override scss variables in react. I have for example a theme.scss with some scss variables. Is it possible to change these scss variables with the props of the Container. I know I could change <code>style={{ 
   backgroundColor: style.backgroundColor }}</code> into <code>style={{ backgroundColor: this.props.backgroundColor }}</code> but then the <code>$primary-font-color</code> would'nt change, because I set <code>$primary-font-color: $item-color;</code> in my theme.scss. Is it possible to OVERRIDE my scss variable <code>$item-color</code> so that also <code>$primary-font-color</code> change?</p>
  
  <p>This is only some example-code to explain what i mean:</p>
  
  <p>theme.scss</p>
  
  <pre><code>$background-color: white;
  $item-color: gray;
  $primary-font-color: $item-color; // I want to override $item-color so that also $primary-font-color changes
  $secondary-font-color: darken($primary-font-color, 15%);
  
  export: {
   backgroundColor: $background-color;
   itemColor: $item-color;
   primaryFontColor: $primary-fonty-color;
   secondaryFontColor: $secondary-font-color;
  }
  </code></pre>
  
  <p>index.js</p>
  
  <pre><code>    ReactDOM.render(
        &lt;Container 
          backgroundColor: 'gray,
          itemColor: 'black'  // I want to change my scss variable to this value
         /&gt;,
        document.getElementById('root')
      );
  </code></pre>
  
  <p>Container</p>
  
  <pre><code>import style from '../style/_theme.scss';
  
  class Container extends Component {
    render(){
  
    &lt;div style={{ backgroundColor: style.backgroundColor }} &gt;
      &lt;div className='item' style={{ backgroundColor: style.itemColor }} &gt;
        &lt;p style={{ backgroundColor: style.itemColor }} &gt;Some Text.. &lt;/p&gt;
    &lt;/div&gt;
    &lt;/div&gt;
  
  }
  </code></pre>