react内联样式支持css变量但需满足作用域前提：变量必须在:root或祖先元素中定义，且命名准确、大小写敏感；否则var(--x)会失效，可加fallback值调试。
React内联样式不支持原生CSS变量语法，直接写 var(--color) 会报错或被忽略。
React的style属性只接受JavaScript对象，不是CSS字符串
你写的 style={{ color: 'var(--text-color)' }} 看似合法，但 React 会把整个字符串当作文本值传给 DOM 的 style.color 属性。浏览器虽然能解析这个字符串，但前提是：CSS 变量已在对应作用域（如 :root 或父元素）中定义，且该元素已渲染完成。
常见错误现象包括：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
-
color: var(--text-color)在 DevTools 的element.style面板里显示为划掉状态（表示无效） - Computed 面板里最终 color 值是
inherit或初始值，而非预期颜色 - 控制台无报错，但样式就是不生效——本质是变量未定义或作用域不对
var() 在内联样式中失效的三个真实原因
不是 React “不支持”，而是运行时环境没满足 CSS 变量生效的前提：
-
--text-color没在:root或当前元素祖先链上定义（比如只在某个.module.css里声明，但没注入到全局） - 用了 CSS Modules 或 styled-components，变量被哈希隔离，
var(--text-color)查不到源头 - 变量名拼写不一致：
--textColor和--text-color是两个不同变量
怎么让var()在style里真正起作用
先确认变量存在，再确保它能被读取：
- 打开 DevTools → Elements → 选中目标元素 → Computed 标签页 → 搜索
--text-color，看是否列出并有值 - 如果没出现，去
:root或父级元素的 Styles 面板里手动加一句--text-color: #333;测试 - 若用 Vite / Webpack，检查是否误将 CSS 变量写在了
.module.css中——模块化 CSS 不会注入到全局作用域 - 临时调试可写成
style={{ color: 'var(--text-color, #666)' }}，提供 fallback 值，避免完全失效
最易被忽略的一点：CSS 变量是大小写敏感的，且不能含空格或特殊符号；--bg color 和 --bg-color 完全无关，而 React 内联样式不会做任何校验或提示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
