如何在React中更改CSS根变量？ [英] How to change CSS root variable in React?

问题描述

是否可以在ReactJS中更改CSS ：root 变量？寻找解决方案来改变 - 基础颜色代码基于从 .change-me 输入颜色中选择的用户

Is it possible to change CSS :root variable in ReactJS ? looking for solution to change --basecolor code based on what user selected from .change-me input color

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

CSS

:root {
  --base: $primary;
}

反应

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

推荐答案

终于找到解决方案

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

这篇关于如何在React中更改CSS根变量？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！