组件主题色需通过作用域继承实现，将CSS变量（如--color-primary）定义在组件根元素（如:host或.card）而非:root，以确保模块隔离；变量名建议加命名空间（如--card-bg），避免冲突；子元素取不到变量值是因为继承链中断，需确保每层都声明或传递变量；主题切换应操作组件级style.setProperty()而非全局document.documentElement，减少重排；SSR需服务端注入变量值防闪动；insertRule适合初始化变量定义，不推荐用于运行时切换。
怎么用--color-primary给组件设主题色
CSS变量不是“写一次全局生效”，而是靠作用域继承。组件要独立换肤，就得把变量定义在组件根元素上，比如:host（Web Components）或.card这类选择器里，不能全塞在:root下。
常见错误是：在:root里定义--color-primary: #007bff，然后指望某个.button自己变蓝——结果整个页面按钮都跟着变，根本做不到模块隔离。
- 每个组件的根容器（如
.modal、.sidebar）都要显式声明自己的变量集 - 变量名带命名空间更安全，比如
--card-bg比--bg不容易冲突 - 别用
!important覆盖变量值，它不生效；改的是变量本身，不是它的使用处
为什么var(--color-text)在子元素里取不到值
变量继承依赖CSS层叠规则，不是“父元素有就自动可用”。如果中间某层写了color: var(--color-text, #333)但没定义--color-text，那这个var()会回退到默认值，而不是继续往上找。
典型场景：React组件里用className="card"，但.card没声明任何变量，子元素直接写color: var(--card-text)——浏览器找不到，就用inherit或初始值，文字可能变透明或消失。
- 检查计算样式（DevTools里看“Computed”面板），确认变量是否真被继承下来
- 用
getComputedStyle(el).getPropertyValue('--card-text')在控制台手动验证 - 避免跨层级跳着传变量，比如
.card→.card-header→.card-title没问题，但.card→.card-title（跳过.card-header）容易断链
如何让主题切换不触发重排（Reflow）
直接改document.documentElement.style.setProperty('--color-bg', '#222')看似简单，但若大量组件都监听:root变量，每次修改都会让所有用到该变量的元素重新计算样式，性能掉得明显。
真正轻量的做法是：只改组件级容器的style，比如cardEl.style.setProperty('--card-bg', '#222')，影响范围锁死在它内部。
- 不要全局切主题，除非真需要整页变色；多数情况只需局部刷新
- 用
class切换配合[data-theme="dark"] .card这种写法，比JS批量设变量更稳定 - SSR环境里，服务端渲染时就注入对应变量值，避免客户端首次渲染闪动
CSSStyleSheet.insertRule动态加主题规则行不行
能用，但不推荐用于主题配置。它插入的是完整CSS规则（如.btn { color: var(--btn-color) }），和变量本身无关；而主题的核心是变量值的替换，不是规则增删。
容易踩的坑：用insertRule反复加同名规则，导致样式表膨胀，DevTools里看到几十条重复.card定义；或者规则插入位置不对，被其他选择器权重盖掉。
- 动态主题优先走
element.style.setProperty()或setAttribute('data-theme', 'blue') -
insertRule适合一次性注入基础变量定义（比如从JSON生成默认主题），而不是运行时切换 - 注意Safari对
insertRule的兼容性：不支持在@media块里插入，也不支持import后的sheet
变量作用域和继承链比想象中脆弱，一个没声明的--xxx不会报错，只会静默失效。调试时先盯住“谁定义了它”“谁继承了它”“谁用了它”，三者缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
