react中style对象需用方括号语法定义css变量，如style={{ '--primary-color': '#007bff' }}；变量仅在设置元素及其后代生效，须确保对应css规则已加载且作用域匹配，动态场景推荐usememo缓存style对象。
React中style对象不支持CSS变量语法直接写入
React的style属性只接受JavaScript对象，键名是驼峰式（如backgroundColor），值必须是字符串或数字。你不能在style对象里写--primary-color: #007bff这种原生CSS变量声明——React会忽略它，浏览器也收不到。
真正能生效的方式，是把CSS变量作为**自定义属性（custom property）注入到DOM元素的style上**，用setProperty或直接拼字符串都不行；必须走style对象的['--var-name']这种方括号语法。
-
style={{ '--primary-color': '#007bff' }}✅ 可以工作（注意引号包裹key） -
style={{ '--primary-color': 'var(--fallback)' }}✅ 支持var()函数值 -
style={{ backgroundColor: 'var(--primary-color)' }}✅ 但这是读取变量，不是定义 -
style={{ '--primary-color': '#007bff', backgroundColor: 'var(--primary-color)' }}✅ 定义+读取可共存
为什么style={{ '--color': 'red' }}在部分组件里不生效
根本原因：CSS变量需要作用域。你在子组件的div上设--color，只对该div及其后代生效；如果样式规则写在父级或全局，且依赖该变量的color、background等属性没在同一个元素或其后代上触发重绘，就看不到效果。
- 确保使用变量的CSS规则已加载（比如通过
:root或组件内className里的color: var(--color)） - 检查是否误将变量设在了无样式的空标签（如
<span></span>）上，而实际渲染文本的子元素没继承或没应用对应规则 - 避免在
React.memo或shouldComponentUpdate优化后，style对象引用未变导致跳过更新（建议用useMemo包裹动态style对象）
动态传入CSS变量时的常见错误
变量名含横线、斜杠、数字开头？必须用字符串键；值为null或undefined会导致该变量被移除（相当于removeProperty）；布尔值会被转成字符串"true"/"false"，可能意外生效。
- ❌
style={{ '--bg-color': color ?? '' }}→ 空字符串会让变量值变成""，某些浏览器解析异常 - ✅
style={{ '--bg-color': color || undefined }}→undefined会让React跳过设置该属性 - ✅
style={useMemo(() => ({ '--bg-color': color }), [color])}→ 避免每次渲染都新建对象 - ⚠️
--font-size-xs要写成'--font-size-xs'，不能写--fontSizeXs（React不会自动转换）
配合CSS-in-JS或CSS Modules更稳妥的替代方案
纯style对象注入变量适合简单场景；一旦变量多、需复用、要媒体查询或伪类支持，就容易失控。这时候推荐退一步：用className配合真实CSS文件，把变量定义在:root或组件顶层容器上，再由子元素读取。
例如：App.css里写:root { --primary: #007bff; }，组件里用style={{ color: 'var(--primary)' }}读取，比在每个组件里重复设--primary更可控。
真正难处理的是“每个实例不同主题色”这类需求——这时style={{ '--theme-color': props.color }}仍是最快路径，只是得同步保证所有用到它的CSS规则都在同一作用域下生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
