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

IT技术 javascript css html reactjs
2021-04-19 02:49:35

是否可以:root在 ReactJS 中更改 CSS变量？寻找--base根据用户从.change-me输入颜色中选择的内容来更改颜色代码的解决方案

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

CSS

:root {
  --base: $primary;
}

react

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'));
3个回答

终于找到解决办法

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'));
有没有办法在 App.css 中设置颜色，然后在整个应用程序中调用它？这样，我就不必为每个元素都做一个 document.setProperty（无论如何，这是希望）
2021-05-30 02:49:35
请注意：在调用下一行之前，setState 可能无法完成设置您的状态。所以要么document.documentElement...在行中使用 event.target.value要么 setState 的第二个参数是设置状态时调用的回调。
2021-06-04 02:49:35
@marcellsimon 好点
2021-06-08 02:49:35

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

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

我为你找到了这个答案：https : //stackoverflow.com/a/37802204 document.documentElement.style.setProperty('--your-variable', '#YOURCOLOR');

其它你可能感兴趣的问题
上一篇webpack --watch 构建一次后退出 下一篇React - 如何映射嵌套对象值？