Changing scss variables in React

50 views Asked by At

so i've got some colors as variables in my scss file

$primary_background: #1E1E1E;
$primary_button: #F2F2F2;
$primary_sharp: #171717;
$primary_button_active: #9D9D9D;
$primary_sharp_active: #2D2D2D;

$bluish_background: #0C002D;    
$bluish_button: #C2C1EF;
$bluish_sharp: #04001E;
$bluish_button_active: #5F52AE;
$bluish_sharp_active: #0C0054;

and use them like this

.button_active {
    background-color: $primary_button_active;
}

.button_text_hidden {
    color: $primary_button;
}

is there any way in react i can either replace all 'primary_' with 'bluish_' styles or their values, for example:

$primary_background: #1E1E1E => $primary_background: #0C002D

i acknowledge it's probably not the best practice to change styles directly like that, but manipulating classes is the last resort here i think

0

There are 0 answers