javascript - 我如何在反应内联样式中使用 HSL 颜色？

Question

如何使用 hsl 颜色范围对内联样式做出反应？我将以下内容作为属性传递给style

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

但是当我检查元素时，我只是得到一个像这样的 rgb：

style="background-color: rgb(255, 255, 255); color: black;"

代码片段是这样的：

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>)
}

顺便说一句，我正在尝试做一些类似热图的事情，其中​​一个项目会根据传入的百分比值变得更红。也许有一种更简单的方法可以做到这一点......但没有引入大量的包裹......

参考：

• https://reactjs.org/docs/faq-styling.html
• https://reactjs.org/docs/dom-elements.html#style

标签： javascriptcssreactjs