微信小程序中--primary-color不生效是因样式隔离导致:root变量无法穿透，需在各组件.wxss中@import变量文件或重复声明；calc()中var()必须带单位；JS不能用document.documentElement，应通过globalData和setData更新主题。
为什么--primary-color在自定义组件里不生效
根本不是写法错，而是微信小程序的样式隔离机制导致:root声明的变量无法穿透到自定义组件内部。即使你在app.wxss里写了:root { --primary-color: #1890ff; }，子组件的.wxss文件也读不到它。
必须在每个用到该变量的组件.wxss中显式@import变量文件，或直接在组件样式顶部重复声明：
- 推荐做法：建一个
common-vars.wxss，只放变量定义，所有页面和组件都@import "./common-vars.wxss"; - 避免用下划线命名（如
--bg_color），旧版开发者工具会忽略；统一用连字符--bg-color -
var(--color, #000)的 fallback 仅在变量**未定义**时触发；若变量值为空字符串、initial或unset，fallback 不生效
calc()里用var(--space-md)报错或计算异常
错误通常不是语法问题，而是单位缺失或混用。小程序 WXSS 对单位一致性极其敏感——var()返回的值必须自带单位，不能是纯数字。
- ✅ 正确：
--space-md: 16rpx;→padding: calc(var(--space-md) * 2); - ❌ 错误：
--space-md: 16;→margin: calc(100% - var(--space-md));（100% - 16非法） - 更稳妥的做法是在组件内声明局部变量：
.btn { --btn-padding: var(--space-md); padding: var(--btn-padding); }，避免跨组件直读根变量引发样式漂移 - 优先用
rpx或rem，少用px，适配多屏幕密度
JS 动态改主题色，document.documentElement.style.setProperty没反应
小程序没有document.documentElement，这个 DOM API 在小程序环境完全无效。试图用 JS 直接操作根节点样式，等于对空气调音。
- 正确路径：把主题状态存在
getApp().globalData.theme，页面onShow时通过this.setData({ themeClass: getApp().globalData.theme })触发重绘 - WXML 中绑定：
class="{{themeClass}}-mode" - WXSS 中分写：
.light-mode { --text-color: #333; }和.dark-mode { --text-color: #fff; } - 真机调试时，部分安卓机型对 CSS 变量更新有延迟，可在
setData后加setTimeout(() => {}, 0)强制触发重绘
暗色模式切换后，var(--text-color)在伪元素::before里不显示
这不是 bug，是 WXSS 的明确限制：var()不能用于@keyframes动画属性，也不能用于content属性的动态值（除非是静态字符串且已加引号）。
- ❌ 无效：
.item::before { content: var(--icon-close); }（即使--icon-close: "×";也不保证兼容） - ✅ 替代方案：用
data-属性传值 + WXML 条件渲染，或改用背景图/图标字体 - 注意：
var()在background、color、padding等常规属性中完全可用，问题只集中在content和动画关键帧 - uni-app 编译的小程序项目还需额外注意：原子类（如
p-4）可能与自定义属性同名冲突，建议变量前缀加业务标识，如--myapp-space-md
最常被忽略的一点：变量复用 ≠ 文件复用。光把common-vars.wxss到处@import不够，还要确保所有组件对同一变量的理解一致——比如--space-md在按钮里是内边距，在卡片里是外边距，那它就不是“一个变量”，而是两个语义不同的量。真正有效的复用，始于清晰的变量语义定义，而非技术上“能用”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
