How to change CSS root variable in React? [duplicate]

Question

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

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

@Muhaimin Looking for solution something like document.documentElement.style.setProperty(--${this.id}, this.value + suffix); — Mo.
– Mo., Commented Jul 21, 2017 at 8:39
@Muhaimin I found something. What you think about the answer given below ? — Mo.
– Mo., Commented Jul 21, 2017 at 12:34

Mo. · Accepted Answer · 2017-07-21 12:33:37Z

26

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

answered Jul 21, 2017 at 12:33

Mo.

27.6k36 gold badges167 silver badges235 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

foreverAnIntern Over a year ago

Is there a way to set the color in App.css, and then call it across the app?This way, I won't have to do a document.setProperty for every element (that is the hope, anyway)

marcellsimon Over a year ago

just a note: setState might not finish setting your state before you call the next line. so either use event.target.value in the document.documentElement... line or setState's second parameter is a callback that is called when the state is set.

Mo. Over a year ago

@marcellsimon good point

llsanketll · Accepted Answer · 2020-06-17 02:14:06Z

8

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}}
/>

answered Jun 17, 2020 at 2:14

llsanketll

2975 silver badges14 bronze badges

4 Comments

Jonathan Sandler Over a year ago

This one saved me! it's really useful for setting up styles for individual elements

Fabio Ribeiro de Carvalho Over a year ago

nice solution, but will not work for typescript

Avinash Over a year ago

this one is best and cleaner solution, thanks

Zorayr Over a year ago

How can we make this work for TypeScript?

cuongdevjs · Accepted Answer · 2020-06-17 02:18:57Z

3

I found this answer for you: https://stackoverflow.com/a/37802204 document.documentElement.style.setProperty('--your-variable', '#YOURCOLOR');

answered Jun 17, 2020 at 2:18

cuongdevjs

7316 silver badges16 bronze badges

Collectives™ on Stack Overflow

How to change CSS root variable in React? [duplicate]

3 Answers 3

3 Comments

4 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

4 Comments

Comments

Linked

Related