ReactでCSSルート変数を変更するには？

Question

ReactJSのCSS :root変数を変更することはできますか？解決策を探している.change-me入力色から選択されたものをユーザーに基づいて--baseカラーコードを変更する

デモ：

:root { 
    --base: $primary; 
} 

が反応https://codepen.io/anon/pen/RgXBEK

CSS最後に見つかった

changeTheme(e){ 
    console.log(e.target.value); 
} 

class App extends React.Component { 
    render() { 
     return (
      <div className="row"> 
       <div className="col-xs-12 text-center"> 
        <p>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.</p> 
        <input 
         className="" 
         type="color" 
         onChange={this.changeTheme.bind(this)} 
         /> 
        <br/><br/> 
       </div> 
      </div> 
     ); 
    } 
} 

ReactDOM.render(<App />, window.document.getElementById('myDiv')); 

Answer 1

溶液

constructor(props){ 
    super(props); 
    this.state = {color: '#3C454B'}; 
} 
changeTheme(e){ 
    this.setState({color: event.target.value}); 
    document.documentElement.style.setProperty('--base',this.state.color); 
} 

class App extends React.Component { 
    render() { 
     return (
      <div className="row"> 
       <div className="col-xs-12 text-center"> 
        <p>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.</p> 
        <input 
         className="" 
         type="color" 
         defaultValue={this.state.color} 
         onChange={(e) => this.handleColor(e)} 
         /> 
        <br/><br/> 
       </div> 
      </div> 
     ); 
    } 
} 

ReactDOM.render(<App />, window.document.getElementById('myDiv'));