应通过组件 export default 中的 options.styleIsolation 显式配置关闭样式隔离，推荐设为 'apply-shared'；切勿在 .json 文件中手动配置，否则会与 uni-app 编译逻辑冲突导致样式错乱。
uni-app 自定义组件怎么关掉 styleIsolation
微信小程序端默认启用 styleIsolation: 'isolated'，导致父组件样式穿不进子组件、子组件样式也影响不到外部——这不是 bug，是机制。想取消隔离，不能靠删配置或改全局开关，必须在组件级显式声明。
关键点：只对当前组件生效，不影响其他组件；且仅在微信小程序（mp-weixin）编译目标下起作用，H5/App 端不受影响。
-
options必须写在export default的对象顶层，不是setup里，也不是data下 - 可选值只有三个：
'isolated'（默认）、'apply-shared'、'shared' - 优先用
'apply-shared'：父组件样式能穿透进来，但子组件样式不会漏出去，相对安全 - 避免用
'shared'，尤其在第三方 UI 库组件里，容易引发全局 class 冲突
示例写法（Vue 2 / Vue 3 Options API 均适用）：
export default {
name: 'MyButton',
options: {
styleIsolation: 'apply-shared'
},
// 其他选项...
}
为什么 pages.json 或组件 .json 里配 styleIsolation 会失效
uni-app 编译时会自动为每个组件生成微信小程序原生组件的 json 配置，并注入自己的 scoped 样式逻辑。如果你手动在组件同级的 xxx.json 文件里加 "styleIsolation": "shared"，反而会和 uni-app 的编译流程冲突——它可能被忽略，也可能导致 class 哈希错乱、样式完全丢失。
真实现象：
- 手动加了
json配置，但开发者工具里 inspect 元素发现 class 名没变，样式依然隔离 - 部分样式突然生效，但其他组件开始出现意外交互（比如一个弹窗改了按钮圆角，结果所有按钮都变了）
结论：一律删掉自定义组件目录下的 .json 文件中手写的 styleIsolation 字段，只通过 options 控制。
:deep() 和 ::v-deep 在小程序里为啥经常失灵
根本原因不是写法错，而是 uni-app 小程序编译链路不走标准 Vue 的属性选择器注入路径。它依赖 postcss 插件重写选择器，而 ::v-deep .xxx 若没加括号，会被直接丢弃；若嵌套过深（比如 .a .b .c .d），微信小程序解析器会截断或匹配失败。
实操建议：
- 必须写成
::v-deep(.wd-button)或:deep(.wd-button)（Vue 3 语法，uni-app 3.1+ 支持），括号不能省 - 穿透层级尽量控制在 1~2 层，避免
:deep() .a .b .c这种写法 - 如果第三方组件内部用了
styleIsolation: 'isolated'（比如你引入的原生微信组件），:deep()完全无效——这是设计限制，不是你能绕过的
App.vue 或页面级 <style> 能否影响自定义组件
可以，但有前提：必须是非 scoped 的 <style>，且目标组件开启了 styleIsolation: 'apply-shared' 或 'shared'。
典型误操作：
- 在
App.vue里写<style scoped>，然后以为能覆盖所有子组件——实际无效 - 在某个页面的
<style scoped>里用:deep()想改第三方组件样式，但该组件没配options.styleIsolation——白写
正确姿势：
若需全局统一按钮颜色，在 App.vue 的非 scoped 样式块里写：
<style>
.wd-button {
background-color: #007AFF !important;
}
</style>
同时确保所有用到 wd-button 的地方，其所在组件都已设置 styleIsolation: 'apply-shared'。
最常被忽略的一点：样式隔离不是“开关”，而是“作用域契约”。你改一个组件的 styleIsolation，等于主动签了一份新协议——它不再遵守默认的封装规则，后续维护时得时刻盯着它有没有意外污染别人，或者被别人意外覆盖。
