如何在Next.js中通过内联样式正确设置自定义CSS变量

实现方案 #

React/Next.js 的内联style属性要求传入对象格式，你要的效果可以通过以下简洁写法直接实现，渲染结果和你期望的<section style="--mycolor:red">完全一致：

<section style={{ '--mycolor': color || 'var(--default-color)' }}>
{/* 子元素内容 */}
</section>

CSS自定义属性（--开头的变量）作为对象的字符串键即可被框架正常解析，后端传入的任意合法颜色格式（颜色名、十六进制、rgba、hsla等）都可以直接传入，所有子元素都可以正常调用--mycolor变量设置样式。

可复用样式对象构造方法 #

如果你想把样式抽离为单独的对象，直接按JS对象语法构造即可，注意组件属性名是style不是styles：

// 组件内构造样式对象
const myStyle = {
  '--mycolor': color || 'var(--default-color)',
  // 可按需追加其他内联样式
  padding: '20px',
  border: '1px solid #eee'
}

// 传入section组件
<section style={myStyle}>
{/* 子元素内容 */}
</section>

内容的提问来源于stack exchange，提问作者Vladimir