小程序中scoped样式失效是因为底层不支持data-v-xxx属性选择器，uni-app模拟机制在自定义组件内失效，导致::v-deep等穿透写法匹配失败；需配置styleIsolation: 'shared'并规范::v-deep(.class)语法，或改用CSS变量穿透。
为什么小程序里 scoped 样式突然不生效了
因为微信小程序底层不支持 Vue 的 data-v-xxx 属性选择器，uni-app 编译时虽尝试模拟 scoped 行为，但在自定义组件内部（尤其是第三方 UI 库如 Wot UI、uView）中，子组件的节点根本没被加上对应哈希属性，导致选择器完全匹配不上。
典型现象包括：::v-deep .wd-cell 在 H5 正常，在小程序里整条规则被丢弃；:deep() 写法编译后为空；甚至加了 !important 也无效。
- 不是你写错了，是编译链路和小程序渲染机制没对齐
- 小程序端的
scoped实际靠 postcss 插件重写选择器，若vue.config.js中漏配或插件版本不匹配，就会跳过处理 -
::v-deep .class必须写成::v-deep(.class)（括号不能省），否则 uni-app 3.1+ 会直接忽略整条规则
如何用 styleIsolation 精准打开样式通道
在需要穿透样式的**父组件**（即你写 ::v-deep 的那个 .vue 文件）中，显式配置 styleIsolation: 'shared'，这是打破“组件嵌套组件”样式监狱的关键一步。
注意：不是在 pages.json 或组件 .json 里配，那是原生小程序写法，会跟 uni-app 自己的 scoped 逻辑打架；也不是全局启用，只对真正需要穿透的组件开。
立即学习“前端免费学习笔记（深入）”；
- Vue 3 setup 语法糖写法：
defineOptions({ options: { styleIsolation: 'shared' } }) - Vue 2 或 Options API 写法：
export default { options: { styleIsolation: 'shared' } } - 配置后，
::v-deep(.target)才能真正穿透到子组件内部节点
穿透失效时的备选方案：CSS 变量 + class 前缀
当 styleIsolation 仍不奏效（比如嵌套三层以上，或遇到某些特殊原生组件），优先用 CSS 变量传递样式，它不受任何隔离机制限制，且跨端一致。
原理很简单：父组件定义变量，子组件用 var(--xxx) 接收，变量作用域天然穿透隔离墙。
- 父组件中：
.my-form { --form-label-color: #ff4757; --form-item-height: 112rpx; } - 子组件（如
<uni-forms-item>）中：.uni-forms-item__label { color: var(--form-label-color); height: var(--form-item-height); } - 变量可统一管理在
@/styles/variable.css中，通过@import引入全局
调试时最容易忽略的三个点
很多问题卡住不是因为方案不对，而是调试路径错了。打开开发者工具后，先确认这几件事：
- 检查目标元素是否真的被渲染出来——有些组件（如
<uni-easyinput>）在v-if为 false 时根本不挂载，样式自然无从谈起 - 看 computed 样式面板里，目标属性是否被其他更高优先级规则覆盖（比如组件库自身 wxss 里的
!important） - 确认当前调试的是「小程序基础库版本」是否 ≥ 2.10.1 ——
styleIsolation在此之前压根不识别
