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

Question

我在反应页面中有一个网格，每一行都使用 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;}