使用depp在小程序中子组件修改第三方ui库uview，样式不生效问题

项目场景：

在小程序中使用第三方的ui库，封装了一个功能，用到了里面的一个组件，个性化设置，方便复用

---

问题描述

使用depp样式修改在h5端是可以正常显示的，但在小程序中 无效果。
如果是在小程序的根文件（可理解为通过路径可以访问的-父级页面）中，直接引用某一个组件，是可以使用deep修改当前组建样式的
但如果你在父文件中引入一个组件，然后想要在这个组件中使用deep修改样式是无效的，h5端可以正常显示，小程序不行
好玩的是，当你在父组件中，使用deep直接去修改子组件中ui库的样式 又是可以的

---

原因分析

在wxss中 默认情况下，自定义组件的样式只受到自定义组件 wxss 的影响。除非以下两种情况：

• app.wxss 或页面的 wxss 中使用了标签名选择器（或一些其他特殊选择器）来直接指定样式，这些选择器会影响到页面和全部组件。通常情况下这是不推荐的做法。
• 指定特殊的样式隔离选项 styleIsolation 。

Component({
  options: {
    styleIsolation: 'isolated'  // 默认情况
  }
})
1
2
3
4
5

styleIsolation 选项从基础库版本 2.6.5 开始支持。它支持以下取值：

• isolated 表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响（一般情况下的默认值）；
• apply-shared 表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面；
• shared 表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。（这个选项在插件中不可用。）

组件样式隔离文档地址

---

解决方案：

在子组件中添加 options 和data同级别 展示

export default {
    data() {
        return {}
    },
    options: {
        styleIsolation: 'shared' // 解除样式隔离
    }
}
1
2
3
4
5
6
7
8