title: How to change CSS root variable in React?
body: <p>Is it possible to change CSS <code>:root</code> variable in ReactJS ? looking for solution to change <code>--base</code>color code based on what user selected from <code>.change-me</code> input color</p>
  
  <p>Demo: <a href="https://codepen.io/anon/pen/RgXBEK" rel="noreferrer">https://codepen.io/anon/pen/RgXBEK</a></p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>:root {
    --base: $primary;
  }
  </code></pre>
  
  <p><strong>React</strong></p>
  
  <pre><code>changeTheme(e){
      console.log(e.target.value);
  }
  
  class App extends React.Component {
      render() {
          return (
              &lt;div className="row"&gt;
                  &lt;div className="col-xs-12 text-center"&gt;
                      &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam voluptates ut eaque, voluptatum veniam nostrum sequi numquam sint, excepturi amet unde quis, ipsum ducimus reprehenderit eligendi pariatur animi esse sed.&lt;/p&gt;
                      &lt;input 
                        className="" 
                        type="color" 
                        onChange={this.changeTheme.bind(this)}
                        /&gt;
                      &lt;br/&gt;&lt;br/&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  
  ReactDOM.render(&lt;App /&gt;, window.document.getElementById('myDiv'));
  </code></pre>