在next.js中使用css变量添加内联样式

Question

为app做组件。对于section，想要添加一些可选的强调色来获得输出，如:

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

where myStyle是jsx样式的对象，但我不明白如何手动创建它(在示例中，它只导入prop w/o细节它从哪里得到)。

那么有没有办法实现简单的输出<section style="--mycolor:red">?

Answer 1

@juliomalves，感谢帮助，最终解决方案是这样的

style={{ '--mycolor': color }}>地点:

"——mycolor">= CSS变量名用引号括起来(CSS属性没有引号)

Answer 2

如果在Nextjs中使用TypeScript，有一个非常简单的解决方案:blow

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

。

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

Answer 3

incase如果你想在next.js中使用style标签插入内联样式，你必须在style={}标签中插入一个对象，因为next中的所有style和classname都被认为是对象。例如，您希望使用内联样式插入div的背景颜色，而不是执行以下操作<div style={{ ["background-color" as any]: "#ffc107" }}></div>请确保使用分号插入样式属性