参考

01

行内样式

第一种方法直接写成行内样式直接获取参数值

例：如下就是直接获取背景颜色值

const color = ['#fff','#000']
color.map(c => <div key={c} style={{ backgroundColor: c }} />)

定义变量，获取变量

外部参数申明成变量，css文件使用var()获取变量值，使用setproperty更改变量的值

例：

// tsx文件
<div id="body-color">
...
    <div className='body-bac'>
    
    </div>
</div>

// css文件
#body-color {
    --lineColor: #ff6600;
    --backGColor: #F1EBFF;
    ...
    
    .body-bac {
        backgroundColor: var(--backGColor);
        borderColor: var(--lineColor);
    }
    ...
}

// js文件
const domStyleChange = document.getElementById('body-color').style
domStyleChange.setproperty('--lineColor',red)
...

02

还有一种使用attr获取html传参？？？

参考

通过html自定义属性传参，css伪元素接受这个参数 举个栗子：通过data-*自定义属性，给div绑定一个char的属性值为：abc

// html
<div class="box" data-char="abc"> 
	abc
</div> 
// css，下方高亮部分
.box::before{content:attr(data-char);display: block;position: absolute;right: 0;bottom: 0;color: red;}