Existe-t-il un moyen de mettre à jour dynamiquement les variables scss en utilisant JS dans react ?

Question

Problème

J'ai deux Variables scss lieux en colors.scss je veux mettre à jour les couleurs de la variable uniquement de javascript sur la base d'une logique,

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

Plus d'informations :

J'ai essayé :export{} qui ne fonctionne pas et aussi document.documentElement.style.setProperty en utilisant des variables css globales. J'utilise reactjs pour le développement de l'interface utilisateur.

Answer 1

Vous pouvez assigner une variable css à $backgroundColor comme

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

et mettre à jour la variable dans js comme suit

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

Answer 2

Vous ne pouvez pas mettre à jour scss car elles n'existent pas au moment de l'exécution (lorsque le JS est exécuté).

Vous pouvez créer deux classes, une pour chaque style, et appliquer l'une des classes au moment de l'exécution.