根据 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;

}