如何<style>在 ReactJS 專案中插入DOM，其中樣式表的值是來自資料庫的動態值。
我有以下簡化方案：
<button class="buy-now-button">Buy now</button>
注意：我無權修改 HTML 或 JSX 元素，解決方案只需要 CSS，并基于按鈕具有的類名。
我希望能夠向具有 CSS 類名的元素添加 CSS 屬性，如背景、顏色、邊框 .buy-now-button
我需要的樣式表是：
<style>
.buy-now-button {
color: button.color; // where button.color value comes from DB
background: button.background; // where button.background value comes from DB
}
</style>
然后，應該將該樣式插入到 DOM 中。
ReactJS 是否提供了一種向 DOM 插入樣式的機制？我該如何解決這個用例？
非常感謝
uj5u.com熱心網友回復：
這整件事當然是一個反模式，因為任何時候你用 React 做任何型別的直接 DOM 操作，你都在濫用它應該使用的方式，但是你可以一次注入一個<style>具有所需顏色的塊：
function injectStylesheet() {
const ss = document.createElement('style')
ss.innerText = 'body { background-color: pink; }';
document.head.append(ss);
}<button onClick="injectStylesheet()">add stylesheet</button>雖然您可以通過查找元素并更新其style屬性來直接更改顏色，但您必須在每次渲染時都這樣做，這只是不必要的性能損失。
uj5u.com熱心網友回復：
如果您使用CDN下載css檔案怎么樣？
您甚至不需要在任何 React 代碼中執行此操作。您可以簡單地在 index.html 中包含以下內容：
<link rel="stylesheet" type="text/css" href="SOME-CDN-URL" />
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/354876.html
標籤：javascript 反应
下一篇：在什么情況下移除CSS過渡？