CODEWITHSUNDEEP
javascriptcssreactjssassscss-mixins
Shujath
Shujath

Reputation: 1171

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

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.

Upvotes: 10

Views: 14183

Answers (2)

Shyam
Shyam

Reputation: 1454

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

Upvotes: 16

felixmosh
felixmosh

Reputation: 35493

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.

Upvotes: 3

Related Questions