【小程序】自定义组件的样式隔离导致---页面/全局样式不生效

遇到的情况

在使用uniapp框架开发小程序时，在首页页面的app.wxss样式文件中通过::v-deep去改变使用的自定义组件中的某个样式时失效。

解决办法：

1. 在组件的json文件中添加如下配置，全局样式即可生效。

"styleIsolation": "apply-shared"

2. 如果偏好在js文件中进行的配置，或者版本号<2.10.1，也可以在js文件中。

Component({
  options: {
    styleIsolation: 'apply-shared'
  }
})

3. 如果版本号<2.6.5，可以使用如下配置。

Component({
  options: {
    addGlobalClass: true
  }
})

分析

原因：组件存在样式隔离

组件默认存在样式隔离，组件的stylelsolation有三个可选值：

• isolated：默认值，组件内外的样式互不影响
• apply-shared：接收外部（包括父页面和全局）的样式，但组件内的样式不会影响外部
• shares：接受外部样式，且组件内的样式会影响外部

demo实例

为了刚好的理解，请看如下demo:

1. 定义一个组件domo，在页面index中引入组件

// domo.wxml
<view class="test1 textbox">domo1</view>
<view class="test2 textbox">domo2</view>
<view class="test3 textbox">domo3</view>

// 在index.wxml中引入
<domo />
<view class="test3 tetxbox">index3</view>

2.在全局、页面、组件中分别定义text1,text2,text3的颜色为粉红、绿、蓝色（textbox样式已省略）

// app.wxss - 全局
.test1 {
  background-color:lightpink;
}

// index.wxss - 页面
.test2 {
  background-color:lightgreen;
}

// domo.wxss - 自定义domo组件
.test3 {
  background-color:lightblue;
}

3.对组件的stylelsolation属性进行不同的取值，结果：

对于domo组件，可以看到在值为isolated时，父页面和全局的样式都不生效，.test3类也只对自己生效；值为apply-shared时，页面和全局样式对组件生效；值为shared时，组件上的样式还会反过来作用到父页面上。

总结

• 从上面的demo来看，个人建议除非特殊需要，否则慎用shared模式，尽量做到组件的样式不影响页面和全局的样式。
• 从小程序官网来看，不仅自定义组件存在样式隔离，页面同样也可以设置stylelsolation属性，并且与自定义组件不同的是，页面中该属性的默认值是shared，因此页面中默认可以应用全局样式。（页面中新增了改属性的取值，可移步去官网查看）
• 小程序组件模块与样式