javascript - 根据 React 页面中的行数据更改 scss 中的颜色

Question

我在 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;
}

我的variables.scss文件

$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;

Answer 1

我个人会做这样的事情:

@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 {
       ...
    }
}

或扩展“基类”:

.color1 {
   @extend .memberRow;
   border: solid 2px $color-member1;
   background-color: $color-member1-bg;
}