CSS变量需定义在祖先元素（如:root）才能自然继承，子组件用var(--color-primary)直接获取；避免内联样式、scoped样式覆盖或Shadow DOM阻断；fallback用标准颜色值，主题切换优先修改:root变量以避免重排。
怎么让子组件自动用父组件定的颜色
靠 CSS 变量（--color-primary 这类）在 DOM 树里自然继承，不是靠 JS 传 props。只要父元素设了 :root 或某个祖先上的变量，子元素用 color: var(--color-primary) 就能拿到——前提是没被中间某层覆盖。
常见错误是：在子组件里直接写死 color: #007bff，或者用内联 style 覆盖了变量；还有人把变量写在 .child 选择器里，结果变量作用域只在自己身上，根本传不下去。
- 变量必须定义在祖先元素上（比如
:root、.card、[data-theme="dark"]），不能只写在用的地方 - 避免用
!important破坏变量链，它会让var()失效 - 如果子组件被 Shadow DOM 包裹（比如 Web Component），变量不会自动透入，得手动
inherit或用::part()
如何安全地 fallback 到默认色
var() 支持第二个参数作降级值，但这个值不能是另一个变量（除非嵌套写两层 var()），也不能是 CSS 函数如 rgb() —— 否则整个声明会被浏览器忽略。
典型翻车现场：color: var(--text-color, rgb(0, 0, 0)); 在旧版 Safari 里直接失效；或者写成 var(--bg, var(--fallback-bg))，但万一 --fallback-bg 也没定义，就真没颜色了。
立即学习“前端免费学习笔记（深入）”；
- 降级值推荐用标准颜色名（
black）、十六进制（#333）或 rgba()（rgba(0,0,0,0.8)） - 多级 fallback 要展开写：
color: var(--text-color, var(--theme-text, #222)); - 别依赖浏览器自动推断——比如
border: var(--border);降级成1px solid #ccc，得明确写var(--border, 1px solid #ccc)
主题切换时怎么避免重排重绘
直接改 :root 上的变量，所有用到它的元素会立刻响应，不触发 layout，这是 CSS 变量最实用的一点。但如果你用 JS 遍历所有元素、逐个 setAttribute 改 class，或者用 JS 修改每个元素的 style.setProperty，反而容易卡顿。
容易被忽略的是：变量值变更后，某些属性（比如 filter、transform）可能触发合成层重建；还有人用变量控制 display: var(--show, block)，这会导致 display 切换，强制重排。
- 只用变量控制「可动画属性」：color、background-color、opacity、transform、filter
- 避免用变量控制
display、height、width、font-size（除非你明确需要重排） - 主题切换时，优先改
document.documentElement的 dataset 或 class，再由 CSS 规则批量更新变量，比单个元素操作更稳
React/Vue 组件里怎么和 CSS 变量配合不打架
框架组件常带内联 style 或 scoped class，容易覆盖掉变量。比如 Vue 的 <style scoped></style> 会加属性选择器，导致 .btn { color: var(--c); } 生效，但父级设的 --c 如果不在同一作用域，子组件就读不到。
React 里更常见的是用 style={{ color: theme.color }} 直接塞内联样式，等于绕过了 CSS 变量链；或者用 CSS-in-JS 库生成随机 class 名，变量根本传不进去。
- VUE：把主题变量写在
<style></style>（非 scoped）里，或用:export把变量暴露给 JS - React：用
document.documentElement.style.setProperty('--color-primary', '#007bff')全局下发，组件内只用var(--color-primary) - 都别在组件 style 标签里重复定义同名变量——比如父组件设了
--size，子组件又写一遍，就断链了
变量不是万能胶，它只解决「值传递」，不解决「结构适配」。比如按钮要根据主题变圆角、阴影、边框粗细，这些得靠配套的变量组合（--radius-sm、--shadow-md），而不是指望一个 --theme 变量自动推导出全部样式。漏掉组合定义，光传颜色，最后还是得补一堆媒体查询或 JS 判断。
