内联样式中不能声明CSS变量，只能用var()引用；变量必须先在:root、父元素或<style>中定义，否则var()查不到值而退为初始值。
内联样式里不能声明 CSS 变量，只能引用；想动态注入样式属性，必须把变量挂到作用域（如 :root 或父元素）再用 var() 引用，否则值永远为空。
为什么 style="--color: red; color: var(--color)" 不生效
浏览器解析 style 属性时只认最终计算值，--color: red 这类自定义属性声明会被直接忽略。DOM 上的 style 是纯内联样式层，不参与 CSS 自定义属性注册流程。
- 变量必须在
<style>块、外部 CSS 文件或:root/ 父元素的style属性中显式定义 - 常见错误写法：
<div style="--c: #f00; background: var(--c)">→background会退为初始值（通常是透明） - 正确做法：先在
<style>:root { --c: #f00; }</style>中定义，再在内联样式中写background: var(--c)
如何用 JS 动态注入并确保实时更新
修改变量后，所有引用该变量的内联样式会自动重绘，无需手动触发重排。但必须用 setProperty()，不能直接赋值给 style.color。
- 全局变量改写：
document.documentElement.style.setProperty('--primary', '#2563eb') - 局部变量改写（仅影响某容器及后代）：
container.style.setProperty('--bg', '#f9fafb') - 清除旧值防污染：
document.documentElement.style.removeProperty('--theme') - 别用
element.style['--var'] = 'val'—— Safari 旧版和部分 Edge 版本不兼容
React/Vue 中绑定 var() 的典型翻车点
框架的 style prop 是静态对象映射，它不会监听 CSS 变量变化。写了 style={{ color: 'var(--text)' }}，后续改 --text 值，这个内联样式不会重算。
立即学习“前端免费学习笔记（深入）”；
- Vue 3 正确写法：
:style="{ '--text': textColor, color: 'var(--text)' }"—— Vue 会响应textColor并同步设置变量 - React 推荐方案：去掉
styleprop，改用className="card"+ CSS 中写.card { color: var(--text); } - 若必须用内联样式（如从 props 计算），就别混
var()：style={{ color: props.textColor || '#374151' }} - SSR 场景下，服务端无法执行 JS，
setProperty()无效，得靠初始 HTML 的<html style="--primary: #3b82f6">静态注入
fallback 不生效的三个真实原因
var(--x, #000) 的回退值只在变量“未定义”或“值无效”时启用，不是“为空”或“为 unset”就触发。
- 后台返回空字符串
""，JS 执行了el.style.setProperty('--x', '')→ 变量已定义但值无效，此时 fallback 仍不启用（浏览器可能报 warning，但不回退） - 变量名拼错：设了
--bg-colour却读var(--bg-color)→ 这才是真正的“未定义”，fallback 生效 - 值类型错误：设了
--size: 12（缺单位），再写font-size: var(--size)→ 值无效，fallback 启用；但calc(var(--size) + 4px)会直接失效，不走 fallback
最易被忽略的是作用域链和 SSR 注入时机——变量必须在首个引用它的元素渲染前就已存在，否则首屏会闪一下默认色。调试时优先看 DevTools 的 Computed 面板里 var() 解析结果，而不是只盯 Styles 面板里的原始声明。
