动态控制伪类样式

React 传入变量1: ‘–color’

export default () {
  return <div style={{'--color': red}}>
      <span></span>
    </div>
}

React 传入变量2: ‘–colorArr’

 var  colorArr= [
    '#3E95E5',
    '#54C66E',
    '#9162E0',
    '#3BC7CB',
    '#EEC847',
    '#3B3ACC',
    '#D26131',
    '#D96433',
  ],
.....
 style={{
                '--background':
                colorPlanArr[
                    index % colorArr.length
                  ],
              }}

css 使用var(–xx) 读取变量

.div::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent var(--color) transparent transparent;
}

原文链接：https://blog.csdn.net/cofecode/article/details/115372495