如何在react中為內(nèi)嵌樣式使用hsl顏色范圍？ 我將下面的內(nèi)容作為屬性傳遞給style

{backgroundColor:hsl(100，80，100%)& quot；，顏色:& quot黑色& quot}

但是，當(dāng)我檢查元素時(shí)，我得到的只是這樣的rgb:

style = & quot背景色:rgb(255，255，255)；顏色:黑色；"

代碼片段如下所示:

const colorPill = (sim) => {
    const sat = Math.round(sim.use * 100) // map
    const pillStyle = {
        backgroundColor: `hsl(100, ${sat}%, 100%)`,
        color: 'black'
    }
    console.log('pillStyle', pillStyle)
    return (<span className='pill' style={pillStyle}>use [{sat}]</span>)
}

順便說一下，我正試圖做一些像熱圖一樣的東西，其中一個(gè)項(xiàng)目將根據(jù)傳入的百分比值變得更紅。也許有更簡(jiǎn)單的方法來做到這一點(diǎn)...但是沒有帶來大量的包裹...

參考資料:

https://reactjs.org/docs/faq-styling.html https://reactjs.org/docs/dom-elements.html#style 它變成白色是因?yàn)榱炼仍O(shè)置為100%。對(duì)于“純”色，將最后一個(gè)數(shù)字設(shè)置為50%

{backgroundColor: "hsl(100, 80%, 50%)", color: "black"}

我被困在同一件事情上的時(shí)間比我應(yīng)該呆的時(shí)間長(zhǎng)得多。我要離開這個(gè)博客了，因?yàn)闆]有一個(gè)評(píng)論真正幫助我意識(shí)到我做錯(cuò)了什么

如上所示，您可以在內(nèi)聯(lián)樣式中使用hsla值