在 next.js 中添加带有 css 变量的内联样式答案

【问题标题】：Add Inline style with css variable in next.js在 next.js 中添加带有 css 变量的内联样式
【发布时间】：2021-10-26 01:17:29
【问题描述】：

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

<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"> 这样的简单输出？

【问题讨论】：

【解决方案1】：

@juliomalves，感谢您的帮助，最终解决方案就像

style={{ '--mycolor': color }}> 其中：

'--mycolor' = css 变量名引用为字符串（css 属性不被引用！）

颜色 = 元素的属性

【讨论】：