Is there a way to dynamically update scss variables using JS in react?

Question

Problem

I have two scss variables places in colors.scss file, I want to update the variable colors only from javascript based on a logic,

if(day){
  // update $backgroundColor to white
}else{
  // update $backgroundColor to black
}

More info:

I have tried :export{} which is not working and also document.documentElement.style.setProperty using global css variables. I am using reactjs for frontend development.

You can use the classnames package to help you manage scss classes in you javascript. — Striped
– Striped, Commented Nov 7, 2020 at 16:34

Shujath · Accepted Answer · 2020-11-07 17:32:54Z

16

You can assign css variable to $backgroundColor as

:root {
  --background-color: white;
}
$backgroundColor: var(--background-color);

and update variable in js as

 const day = true;
 const root = document.documentElement;
 root.style.setProperty('--background-color', day ? 'white' : 'black');

edited Nov 7, 2020 at 17:32

Shujath

1,2412 gold badges12 silver badges24 bronze badges

answered Nov 7, 2020 at 16:39

Shyam

1,4548 silver badges13 bronze badges

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

Comments

felixmosh · Accepted Answer · 2020-11-07 16:37:29Z

3

You can't update scss variables since they are not exist in runtime (when JS is runs).

You can make 2 classes, one with each style, and apply one of the classes at runtime.

answered Nov 7, 2020 at 16:37

felixmosh

35.8k10 gold badges81 silver badges99 bronze badges

1 Comment

Shujath Over a year ago

You are right in a way, we cannot update scss variables directly, thus having a css variable placeholder helps in dynamic updation.

Collectives™ on Stack Overflow

Is there a way to dynamically update scss variables using JS in react?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related