Is it possible to change CSS :root
variable in ReactJS ? looking for solution to change --base
color code based on what user selected from .change-me
input color
Demo: 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'));
The simple solution is to place the CSS variables into a separate CSS file and then swap it out as needed. For example, a media query to support dark mode could do the swap or you could use JavaScript, a pre-baked theme, etc.
I found out that you can change the root variable from any element. By wrapping the variable in double quotes "--base" and using it as the key in your style object.
1 - External Stylesheet You can create a new CSS file in your project directory and add your CSS inside it. You can then import it in your component, class or React JS page. The following code is used to import an external CSS stylesheet.
React doesn't do styling React components output HTML, and CSS styles the HTML. As far as the browser is concerned, React doesn't figure into it. The browser applies CSS rules to the HTML on the page, whether that HTML came from an . html file or was generated by React.
Finally found solution
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'));
I found out that you can change the root variable from any element. By wrapping the variable in double quotes "--base"
and using it as the key in your style object.
<input
className=""
type="color"
onChange={this.changeTheme.bind(this)}
style={{"--base":this.state.color}}
/>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With