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

Question

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

<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">呢？

Answer 1

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

style={{ '--mycolor': color }}> 在哪里：

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

颜色= 元素的 prop

Answer 2

如果将 TypeScript 与 Nextjs 一起使用，有一个非常简单的解决方案，如下所示

{{ ['your css variable name' as any] : your value}}

例如

['--rating' as any]: 2.5,
['--star-color' as any]: '#b3b3b3',