小编Vla*_*mir的帖子

为应用程序做组件。对于部分想要添加传递一些可选强调色以获得输出的功能，例如：

<section style="--mycolor:red">
... //contents
</section>

其中“red”可以在页面构建期间作为颜色名称、#hex、“rgba()”或“hsla()”字符串传递到后端。它提供了将该颜色用于其子元素的机会section- 用于边框颜色、第一个字母、标记、背景等。

简单代码^:

<section style={`--mycolor:{color}`};>

不起作用，因为 next 需要可映射代码，但看起来 css 变量名称不能在内联语法中解析。我还可以用<style jsx>语句注入它：

<style jsx>{`
    section{
        --mycolor:  ${ color != '' ? color : 'var(--default-color)'};
    }
`}
</style>

但这个解决方案对于这样简单的任务来说看起来“肮脏”——添加了大量不必要的代码只是为了服务一个 CSS 规则。

我认为这可以通过类似的事情来实现

<section styles={myStyle}>

其中 myStyle 是jsx样式对象，但我不明白如何手动创建它（在示例中，它是唯一导入的道具，没有详细信息从哪里获得）。

那么有没有办法实现像这样的简单输出<section style="--mycolor:red">呢？