CSS怎么在小程序里实现主题定制_全局引入与局部CSS变量覆盖
小程序原生不支持 :root 声明 CSS 变量，仅支持在元素 style 属性中定义并继承使用 var()；推荐 JS 动态注入主题变量到根节点实现跨平台“伪全局”覆盖。
小程序里不能直接用 :root { --color-primary: #1890ff; } 全局声明 CSS 变量？
能，但得看平台。微信小程序的 WXML + WXSS 不支持原生 :root 伪类，var(--color-primary) 在 WXSS 中会被忽略——不是语法报错，而是压根不解析。支付宝、百度、字节小程序同理。真正能用原生 CSS 变量的地方，只有通过 web-view 加载的 H5 页面，或 Taro/UniApp 编译后的 H5 端。
所以「全局引入 CSS 变量」在原生小程序中是伪命题，必须换思路：
- 用 JS 动态写入
style属性（最通用） - 用小程序的
globalStyle+pageStyle配合主题 class 切换（微信基础库 2.27.0+ 支持） - 用构建时变量替换（Taro/UniApp 场景下更可行）
如何用 JS 注入主题变量到 <view> 根节点实现「伪全局」覆盖
这是目前最稳定、跨平台兼容的做法：在 App.js 的 onLaunch 或页面 onLoad 中，读取主题配置（本地缓存或服务端下发），拼出一串内联 style 字符串，挂到 <view class="app-root"> 上。
示例（微信小程序）：
立即学习“前端免费学习笔记（深入）”；
// app.jsApp({ onLaunch() { const theme = wx.getStorageSync('theme') || { primary: '#1890ff', bg: '#ffffff' }; const style = `--color-primary: ${theme.primary}; --bg-color: ${theme.bg};`; this.globalData.themeStyle = style; }});
然后在 app.wxml 顶层包裹一层：
<view class="app-root" style="{{app.globalData.themeStyle}}"> <!-- 页面内容 --></view>
后续所有子组件都能安全使用 color: var(--color-primary); ——因为 WXSS 实际上支持 var() 函数，只要变量定义在祖先元素的 style 属性里，它就能继承并解析。
注意点：
- 变量名必须用双短横线前缀（
--xxx），不能是colorPrimary - 不能在 WXSS 文件里写
:root { --x: y }，否则无效 - 每次切换主题需重新 setData 更新
style字符串，并触发视图重绘
局部组件怎么绕过全局主题、强制用固定色值？
直接写内联 style 最有效。WXSS 的层叠规则在小程序里和浏览器一致：内联样式 > ID 选择器 > 类选择器 > 元素选择器，且 !important 依然生效（虽然不推荐）。
比如一个按钮要始终用红色，不管当前主题是深色还是蓝色：
<button style="background-color: #f5222d !important;">删除</button>
或者封装成组件属性：
<my-button theme="danger" />
在 my-button.js 里根据 theme 属性决定是否跳过 var(--color-primary)，改用硬编码值或独立变量：
// my-button.wxss.normal { background-color: var(--color-primary); }.danger { background-color: var(--color-danger, #f5222d); }
这样既保留了主题可扩展性，又没牺牲局部控制力。
容易踩的坑：
- 在 WXSS 里写
.danger { background-color: #f5222d; }后，又被父级var(--color-primary)覆盖——说明 class 优先级不够，加!important或提升选择器权重（如view .danger） - 动态设置
style时忘了转义颜色值中的空格或特殊字符（比如rgb(245, 34, 45)没引号会解析失败）
为什么不要在 app.wxss 里 @import 多套主题 CSS 文件？
因为 WXSS 不支持媒体查询、不支持 @supports、不支持条件 import，而且所有 @import 都是编译期合并，没法运行时切换。你写：
@import "./theme-light.wxss";@import "./theme-dark.wxss";
结果是两套规则全打进最终样式表，dark 规则会直接覆盖 light 规则（按 import 顺序），根本做不到「按需加载」。
真要走文件分离，得用构建工具（如 webpack 的 MiniCssExtractPlugin）配合环境变量生成多套 WXSS，再让小程序只引用其中一份——但这已超出原生开发范畴，属于工程化改造。
简单项目，老老实实用 JS 注入变量 + class 切换就够了；复杂项目，建议直接上 Taro 或 UniApp，它们对 CSS 变量 + 主题方案有 runtime 支持，不用自己 patch。
最常被忽略的一点：小程序里 var(--x) 的 fallback 值不能带单位缩写（如 var(--size, 12rpx) 是合法的，但 var(--size, 12) 会导致整条声明失效）。写 fallback 时务必带完整单位。
