第三方弹窗插件中var(--x)不生效，根本原因是插件容器形成作用域孤岛，未继承:root或父级变量；需手动在挂载容器上声明变量、加all: inherit或通过:host承接，避免js内联style写var()及拼写错误。
第三方弹窗插件（如 Tippy.js、Flatpickr、CKEditor 气球工具栏）里 var(--x) 不生效，不是变量写错了，而是它压根没继承到——插件容器自成一个层叠和作用域孤岛，:root 变量进不去，父级声明也传不下来。
插件容器没继承 CSS 变量，得手动“开门”
大多数弹窗插件默认挂载在触发元素附近（比如 .modal-body 内），而非 document.body 直系子节点。结果就是：插件 DOM 节点的父容器没声明变量，或声明了但没设 all: inherit，导致 var(--x) 查不到源头。
- 检查插件最外层容器（如
.tippy-box或.flatpickr-calendar）的 computed styles → Custom Properties，看是否为空 - 给插件挂载父容器加
style="all: inherit"（适用于 slot 场景）或直接在该容器上声明变量：.tippy-box { --primary: #1890ff; } - Web Components 必须在
:host里显式承接：:host { --primary: inherit; }，缺inherit就等于关着门
变量定义位置错，插件读不到 :root
很多 UI 库（包括 Ant Design、MUI）不依赖 :root，而是监听其直接父节点上的变量。你写了 :root { --bg: #fff }，但插件渲染在 #app 下，而 #app 没声明任何变量——那插件就只能用浏览器默认值。
- 把变量移到插件实际挂载的父容器上，比如
#app { --bg: #fff; --text: #333; } - 如果插件支持主题类（如
tippy-theme-dark），优先用 class 控制，别强求变量穿透 - 避免嵌套太深：插件内部再套一层
div并设class="card"，却忘了在.card上重声明--card-bg，那它还是读不到
内联 style 和 @keyframes 里 var() 天然失效
插件常用 JS 动态设置 style 属性（如 el.style.background = 'var(--bg)'），但这行不通——HTML 的 style 属性只认静态值，var() 会被浏览器静默丢弃，DevTools 的 Styles 面板里都看不到。
- 别在 JS 里拼
var(--x)字符串赋值给style；改用getComputedStyle提前读取：getComputedStyle(document.documentElement).getPropertyValue('--bg').trim() - @keyframes 中不能用
var(--offset)，动画会静默跳过；必须写成transform: translateX(calc(var(--offset)))，且--offset得定义在动画元素自身上 - 插件若用 CSS-in-JS（如 Emotion）注入样式，确认它是否启用
cssVars支持，否则变量照样不解析
最常被忽略的一点：变量名拼错是静默失败，不是报错。插件代码里写 var(--praimary)，你查 :root 时搜 --primary 就永远对不上——务必用 DevTools 的 Elements 面板右键「Reveal in Elements panel」，再点 computed → Custom Properties，逐个核对真实声明名。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
