javascript - 使用 React 内联样式设置第三方元素的样式

Question

我正在尝试对第三方库生成的样式元素进行 react 。在下面的代码片段中，我用 css 实现了我想要的效果。我想使用 JavaScript 来完成此操作，以便用户可以定义自定义配色方案。

.ThirdPartyDiv {
  color: red;
}

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

“用户定义”是指用户将为保存在数据库中的颜色1、颜色2、颜色3 等指定值。当网站加载时(在给定页面上)，我们将加载此信息并从中构建样式表。

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。启动应用程序时加载文件。

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