我正在嘗試使用 Tailwind 設定動態背景顏色。
但是，背景顏色并未應用于 div。我很困惑，因為當我檢查檢查器時，我可以看到在瀏覽器中，正確的 bg-${colors[index]} 應用于每個 div，但沒有呈現顏色。
const colors = ['#7a5195', '#bc5090','#ef5675']
export default function App() {
const names = ['Tyler', "Charles", 'Vince']
let labels = {}
names.forEach((name,index)=>{
labels[name] = `bg-[${colors[index]}]`
})
return (
<>
{
names.map((name)=>{
return(
<div className={`${labels[name]}`}>
{name}
</div>
)
})
}
</>
);
}
uj5u.com熱心網友回復：
在 Tailwind 中，您不能使用動態類命名，例如bg-${color}.
這是因為當 Tailwind 編譯其 CSS 時，它會查找您的所有代碼并檢查類名是否匹配。
如果你想要動態名稱類，你應該寫下所有的類名。
但是對于您的特定用例，我不會使用 Tailwind 的 JIT，而是使用style屬性并動態更改backgroundColor值。
它將使用更少的 CSS 并減少您的頭痛。
最后，這是我的建議
const colors = ['#7a5195', '#bc5090','#ef5675'];
export default function App() {
const names = ['Tyler', "Charles", 'Vince']
const labels = {};
names.forEach((name, index) => {
labels[name] = colors[index];
});
return (
<>
{
names.map((name) => (
<div style={{ backgroundColor: `${labels[name]}` }}>
{name}
</div>
)
}
</>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/485362.html
上一篇：如何使用sqlite3連接游標執行sqlalchecmyTextClause陳述句？
下一篇：從React中的表行獲取物件