Question

我有一些基本的内容

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

由API返回。我想将其转换为CSS，例如

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

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

Answer 1

原则上，您需要使用for..in，以便迭代对象属性。您将为类和类属性执行此操作。那么这只是建立正确语法的问题;将其添加到我们将以编程方式创建的<style>元素;并将其注入文档<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>

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

1 个答案: