gpt4 book ai didi

css - 如何在 React 中从 JSON 导入全局 CSS

转载 作者:太空宇宙 更新时间:2023-11-04 08:37:42 25 4
gpt4 key购买 nike

我有一些类似的东西

  "A": {
"color": "#FF0000"
},
"B": {
"color": "#006600"
},

由 API 返回。我想把它转换成 CSS,比如

.A { color : #FF0000}
.B {...}

然后加载它以便在我的应用程序中全局使用。我怎样才能做到这一点?我发现的所有其他解决方案都需要从文件加载,或者指定您应用 cssFile.class 属性。 JSON 中有未知数量的样式。

最佳答案

原则上,您需要使用 for..in这样您就可以遍历对象属性。您将为类和类属性执行此操作。那么这只是构建正确语法的问题;将其添加到 <style>元素,我们将以编程方式创建;并将其注入(inject)文档 <head> .

var data = {
"A": {
"color": "#FF0000"
},
"B": {
"color": "#006600"
}
}, rules = [];


for(var i in data) {
var rule = `.${i}{`;
for(var j in data[i]) {
rule += `${j}:${data[i][j]};`;
}
rule += `}`;
rules.push(rule);
}

var injectedStyles = document.createElement('style');
injectedStyles.setAttribute('type', 'text/css');
injectedStyles.innerHTML = rules.join('');

document.head.appendChild(injectedStyles);
<p class="A">This should be red</p>
<p class="B">This should be dark green</p>
<p class="C">This should be the default text color</p>

关于css - 如何在 React 中从 JSON 导入全局 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44333486/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com