Javascript 根据React页面中的行数据更改SCS中的颜色

我在react页面中有一个网格，每一行都使用来自scss文件的属性进行样式设置。我希望能够根据行JSON数据中的颜色更改某些内容的颜色，如行背景、边框和其他一些内容。我不想维护8个scss文件（每种颜色一个）。我想传入一种颜色，并让它更改scss文件中的值。我不确定如何将React中的值传递到scss文件

我的主.scss文件

@import 'variables.scss';

.memberRow{
    width:99%;
    height:55px;
    border:solid 2px $color-member4;
    margin:3px;
    display: flex;
    flex-direction: row;
    background-color: $color-member4-bg;
}

$color-member1: #65D3E3;
$color-member2: #ED7425;
$color-member3: #F7BC20;
$color-member4: #34B66B;
$color-member5: #9675CC;
$color-member6: #7B8A97;
$color-member7: #2962FF;
$color-member8: #F48FB1;

$color-member1-bg: #65D3E355;
$color-member2-bg: #ED742555;
$color-member3-bg: #F7BC2055;
$color-member4-bg: #34B66B55;
$color-member5-bg: #9675CC55;
$color-member6-bg: #7B8A9755;
$color-member7-bg: #2962FF55;
$color-member8-bg: #F48FB155;

My variables.scss文件

@import 'variables.scss';

.memberRow{
    width:99%;
    height:55px;
    border:solid 2px $color-member4;
    margin:3px;
    display: flex;
    flex-direction: row;
    background-color: $color-member4-bg;
}

$color-member1: #65D3E3;
$color-member2: #ED7425;
$color-member3: #F7BC20;
$color-member4: #34B66B;
$color-member5: #9675CC;
$color-member6: #7B8A97;
$color-member7: #2962FF;
$color-member8: #F48FB1;

$color-member1-bg: #65D3E355;
$color-member2-bg: #ED742555;
$color-member3-bg: #F7BC2055;
$color-member4-bg: #34B66B55;
$color-member5-bg: #9675CC55;
$color-member6-bg: #7B8A9755;
$color-member7-bg: #2962FF55;
$color-member8-bg: #F48FB155;

---

就我个人而言，我会这样做：

@import 'variables.scss';

.memberRow{
    width:99%;
    height:55px;
    margin:3px;
    display: flex;
    flex-direction: row;

    &.color1 {
       border: solid 2px $color-member1;
       background-color: $color-member1-bg;
    }
    &.color2 {
       ...
    }
}

或扩展“基类”：

---

你能发布你正在描述的JavaScript吗？我还没有写那部分。我想先换颜色。我基本上会在一个循环中根据数据改变每一行的颜色。我建议在尝试动态更改SCSS文件之前，通过JS或类名（）之类的库来更改类。我以前使用过这种方法。我试图避免的是一个样式表有8个不同的版本，它们只会有几种颜色的不同。一个父类用于共享样式，子类用于颜色，根据需要使用JS开关。看来我们有办法了！