内联样式无法响应式更新时，应使用:style绑定CSS变量并配合setProperty动态设置，避免字符串拼接fallback、注意作用域与时机、SSR需静态注入、读取须用document.documentElement。
内联样式改不了？用 :style + CSS 变量绕过硬编码
Vue/React 里直接写 style="color: {{ color }}" 不仅难维护，还容易被框架忽略响应式更新。真正能动态生效的，是把变量挂到根元素或组件作用域的 CSS 自定义属性上，再在内联样式里用 var(--color) 引用。
- 必须在
:root或目标元素上用style="--color: red"显式设置变量，光写var(--color)不会自动 fallback - JS 修改时别直接操作
element.style.color，改用element.style.setProperty('--color', 'blue') - 注意大小写敏感：
--bg-color和--BG-COLOR是两个变量 - IE 不支持 CSS 变量，如果要兼容，得加 JS 回退逻辑（比如根据变量值批量重写
style属性）
React 中 style 对象无法响应 CSS 变量变化？
React 的 style prop 是纯对象映射，它不会监听 CSS 变量变更。你写了 style={{ backgroundColor: 'var(--bg)' }}，React 会把它当静态字符串传给 DOM，后续改 --bg 值，这个内联样式不会重算。
- 正确做法：去掉
styleprop，改用 class + CSS 变量，例如className="card"，然后在 CSS 里写.card { background-color: var(--bg); } - 如果必须用内联样式（比如从 props 动态生成），就别混用
var()，老老实实传 JS 计算后的值：style={{ backgroundColor: props.bgColor || '#fff' }} - 用
useEffect同步 props 到:root变量时，记得清理旧值，避免跨组件污染：document.documentElement.style.removeProperty('--bg')
Vue 3 的 :style 绑定和 CSS 变量怎么配合才不翻车？
Vue 的 :style 支持对象、数组、CSS 变量混合写法，但有个隐藏规则：只要对象里有任意一个 key 是响应式计算的，整个 style 就会重新绑定 —— 这意味着 var(--x) 字符串本身不会触发更新，但包裹它的响应式变量会。
- 推荐写法：
:style="{ '--primary': themeColor, backgroundColor: 'var(--primary)' }"，这样 Vue 会监听themeColor，并同步更新--primary变量 - 别写成
:style="{ backgroundColor: `var(--primary, ${themeColor})` }"，这种字符串拼接会让 fallback 值固化，失去 CSS 变量的运行时灵活性 - SSR 场景下，服务端渲染时
:root没有 JS 环境，setProperty无效，得靠初始 HTML 的style="--primary: #007bff"静态注入
为什么 getComputedStyle(el).getPropertyValue('--color') 返回空？
不是所有元素都能读取自定义属性，只有那些明确设置了该变量（或继承了父级设置）的元素才返回有效值。更常见的是误用了 getPropertyValue —— 它只读当前元素的 style 属性或 computed 样式，不查 CSS 文件里 :root { --color: red } 这种声明。
立即学习“前端免费学习笔记（深入）”；
- 要读全局变量，必须查
getComputedStyle(document.documentElement)，而不是任意元素 - 如果变量是通过 JS 设置的，确保设置时机早于读取时机（比如不要在
mounted之前就读） - 变量名带空格或特殊字符？不行。
--my-color合法，--my color或--123abc会被忽略
