Question

我正在尝试使用对第三方库生成的样式元素的反应。在下面的片段中，我用css实现了我想要的。我想用javascript做这件事，这样我就可以让用户定义自定义颜色方案。

.ThirdPartyDiv {
  color: red;
}

<div class="MyDiv">
  <div class="ThirdPartyDiv">
    Some Content
  </div>
</div>

“用户定义”是指用户将指定保存在数据库中的colour1, colour2, colour3, etc的值。当网站加载时（在给定页面上），我们将加载此信息并从中构建样式表。

Answer 1

你可以使用普通的javascript来获得条件css。创建一个样式元素并附加一个cssRule。像这样：

const userColor = "green" //Get from db of course

var style = document.createElement("style");
style.appendChild(document.createTextNode(""));
document.head.appendChild(style);

style.sheet.insertRule(".ThirdPartyDiv { color:"+userColor+"; }", 0);

它会将styleDomElement插入您的页面。启动应用程序时加载文件。

编辑：doc - https://developer.mozilla.org/fr/docs/Web/API/CSSStyleSheet/insertRule

使用React内联样式设计第三方元素

1 个答案: