小程序端全局样式污染的根本原因是uni-app编译时scoped失效，因WXML不支持data-v-xxx属性选择器，导致哈希class不一致而样式泄漏；需禁用styleIsolation配置、正确使用:deep()、扁平化命名并避免深层嵌套。
为什么小程序端会出现全局样式污染导致错位
根本原因不是你写了错的 CSS，而是 uni-app 在编译微信/抖音/支付宝小程序时，对 <style scoped> 的处理机制失效：小程序 WXML 不支持 Vue 标准的 data-v-xxx 属性选择器，scoped 编译后变成普通 class 名，但父子组件哈希不一致，导致样式“漏出”或“进不来”。典型现象是：H5 正常，小程序里按钮被父页面的 .btn 全局样式覆盖、列表项 padding 突然变大、图标尺寸错乱。
必须关闭 styleIsolation 手动配置
很多开发者在 pages.json 或组件 .json 里手动加了 "styleIsolation": "isolated"，这会和 uni-app 自身的 scoped 编译逻辑冲突，反而加剧污染。实际项目中：
- 不要在任何
.json文件里写styleIsolation - uni-app 3.1+ 已默认用
:deep()替代老式::v-deep，无需额外干预 - 若引入原生微信自定义组件（非 uni-app 封装），它自带
styleIsolation: isolated是设计使然，你的<style scoped>天然无法影响它——这不是 bug
::v-deep 写法必须带括号，且不能嵌套过深
::v-deep .child 在小程序里会被直接丢弃，必须写成 ::v-deep(.child)。同时，选择器层级超过 3 层（如 .a .b .c .d）容易触发小程序 selector 长度限制或匹配失败：
- 扁平化命名：用
.card-header代替.card > .header - 关键穿透只写一层：
:deep(.icon)足够，避免:deep(.list) :deep(.item) :deep(.text) - 动态 class（如
:class="['item', isActive ? 'active' : '']"）不会被哈希，需手动加前缀或改用内联style
真正生效的 scoped 兼容写法
不用条件编译、不改构建配置，直接在组件内生效：
<style scoped>
.my-button {
background-color: #007AFF;
}
:deep(.uni-icon) {
font-size: 40upx;
}
</style>
注意：upx 单位比 rpx 更稳，uni-app 3.x 对 upx 的跨端换算已收敛；:deep() 在 uni-app 3.1+ 中已替代 ::v-deep，且括号不可省略。如果仍错位，大概率是父组件用了非 scoped 全局样式，或第三方库（如 colorUI）未适配小程序 scoped 机制——这时优先用 !important 临时兜底，而非放弃 scoped。
