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, Nov 07 '20 at 16:34

score 12 · Accepted Answer · edited Nov 07 '20 at 17:32

12

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 07 '20 at 17:32

Shujath

846
1
8
22

answered Nov 07 '20 at 16:39

Shyam

1,364
7
13

score 2 · Answer 2 · answered Nov 07 '20 at 16:37

2

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 07 '20 at 16:37

felixmosh

32,615
9
69
88

2

You are right in a way, we cannot update **scss** variables directly, thus having a css variable placeholder helps in dynamic updation. – Shujath Nov 07 '20 at 17:27

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

2 Answers2