css 文件中的 Javascript 颜色代码变量(React JS)

Question

我在 JS 文件中有颜色代码列表。

JavaScript:

export var ColorCodes = { 
    first:'#D09FD2',  
    second:'#A72500',  
    third:'#F67GHI',   
    fourth:'#8FERDD',  
} 

我尝试在 CSS 文件中使用 js 变量，如下所示。

它会抛出错误。

CSS:

import 'my.js'

.firstColor{

    font-size:15px;
    color:ColorCodes.first;
    }

.secColor{

    font-size:12px;
    color:ColorCodes.second;
    }

HTML

<div class="firstColor">aaa</div>   

Answer 1

你不能在 css 中使用 js，相反你应该在你的 css 中抽象你的颜色代码，然后通过 javascript 使用动态类