使用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內聯樣式設計第三方元素

回答

相關問題