如何在React中更改CSS根变量？

Question

是否可以在ReactJS中更改CSS Shape变量？根据从:root输入颜色

中选择的用户寻找更改--base颜色代码的解决方案

演示：https://codepen.io/anon/pen/RgXBEK

CSS

.change-me

阵营

:root {
  --base: $primary;
}

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'));

Answer 2

我发现您可以从任何元素更改根变量。通过将变量包装在双引号"--base"中，并将其用作样式对象中的键。

<input 
    className="" 
    type="color" 
    onChange={this.changeTheme.bind(this)}
    style={{"--base":this.state.color}}
/>

Answer 3

我为您找到了这个答案： https://stackoverflow.com/a/37802204 const sortedSeasons = orders.concat(products).reduce((acc, currentVal) => { acc[currentVal.season] = Object.assign(acc[currentVal.id] || {}, currentVal); return acc; }, {}); Object.keys(sortedSeasons).map(i => sortedSeasons[i]);