React的style对象中CSS变量名必须用字符串键（如'--primary-color'），驼峰式或省略短横线均无效；变量仅在设置元素及其后代生效，需注意作用域、useMemo优化、null/undefined安全处理及与SCSS/CSS Modules混用时的继承限制。
style对象里必须用字符串键写CSS变量名
React的style属性只认驼峰式JS属性（如backgroundColor），不识别--primary-color这种原生CSS语法。你得把它当“自定义属性”塞进对象，且键名必须是字符串：{ '--primary-color': '#007bff' }。写成--primaryColor或primaryColor都会被忽略——React不会帮你转义或纠错。
变量只在设置它的DOM元素及其后代生效
你在div上设了{ '--color': color }，那只有这个div自己和它里面的所有子元素能读到var(--color)。常见失效场景包括：
- 变量设在空容器上，而实际带样式的文本在兄弟节点——变量跨不过去
- CSS规则里写了
color: var(--color)，但该规则匹配的是父级或全局选择器，而变量没设在对应祖先上 - 用了
React.memo，但style对象引用没变，更新被跳过
推荐用useMemo(() => ({ '--color': color }), [color])包裹动态style对象。
根据项目规范生成 React 和 Vue 组件，包括 TypeScript 类型定义、Ant Design 5 集成、Tailwind CSS 样式及 Vitest 测试文件。当用户提出创建、生成或搭建前端组件的需求时启用，例如：“帮我写一个表格组件”、“生成一个弹窗”、“create a form component”、“写一个列表页”、“生成一个下拉选择器”。该能力在以下任一场景触发：涉及 React/TSX/Vue 组件生成、UI 组件创建，或为组件生成测试文件。
值为null或undefined时变量会被移除
React遇到style={{ '--color': undefined }}会直接跳过设置，相当于调用removeProperty；但''（空字符串）可能触发异常解析，尤其在动画或计算值场景下。安全写法是：color || undefined，而不是color ?? ''。
立即学习“前端免费学习笔记（深入）”；
和SCSS或CSS Modules混用时要注意作用域穿透
如果你在SCSS里写了.btn { color: var(--primary-color); }，那必须确保--primary-color设在.btn元素本身，或它的某个祖先DOM节点上。CSS Modules的哈希类名不影响变量继承，但all: unset、all: initial这类声明会切断继承链。高阶组件透传变量时，别只在JS里构造对象，一定要挂到真实DOM容器的style上。
