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

我正在尝试使用对第三方库生成的样式元素的反应。在下面的代码片段中，我实现了我想要的CSS。我想用JavaScript做到这一点，以便我可以让用户定义自定义配色方案。使用React内联样式设计第三方元素

.ThirdPartyDiv { 
 
    color: red; 
 
}

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

通过“用户自定义”我的意思是，用户会为colour1, colour2, colour3, etc这是保存在数据库中指定的值。当网站被加载时（在给定的页面上），我们将加载这些信息并从中建立一个样式表。

来源

2017-07-20 Ben McAlindin

你不能内联样式吧？你想使用普通的js做一个条件渲染？ – Nevosis

你能否在你的问题中添加更多细节？你“用户定义”是什么？你在哪里存储这些信息？用户如何设定主题？ – azium

你可以通过使用普通的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

来源

2017-07-20 15:49:47 Nevosis

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

回答

相关问题