微信小程序-组件样式隔离

井眼2024-07-07 16:42

一.isolated

isolated是自定义组件.js的options对象字段styleIsolation的默认值，表示自定义组件和组件使用者之间的样式相互独立，互不影响。

写法：

  options:{
    //isolated默认值，开启样式隔离，使用者和自定义组件的样式相互不影响
    styleIsolation:"isolated"
}

二. apply-shared

apply-shared:组件使用者或者页面能影响自定义组件，但是自定义组件无法影响组件使用者

  options:{
    //apply-shared:组件使用者或者页面能影响自定义组件，但是自定义组件无法影响组件使用者
    styleIsolation:"apply-shared"
}

三.shared

shared:自定义组件和组件使用者的样式相互影响，影响范围涉及到其它使用了share和apply-share的自定义组件

  options:{
    //shared:自定义组件和组件使用者的样式相互影响，影响范围涉及到其它使用了share和apply-share的自定义组件
    styleIsolation:"shared""
}

在使用shared影响到的范围太广，我们可以通过命名空间进行范围限制。

比如在自定义checkbox组件的时候，在wxml文件里定义checkbox

<checkbox class="checkbox" checked="{{isCheck}}" 
bind:tap="update"></checkbox>

在scss文件里给checkbox设置样式的时候，可以使用命名空间就能确定具体组件的样式

.checkbox .wx-checkbox-input{
  width:24rpx !important;
  height: 24rpx !important;
  border-radius: 50% !important;
  border: 1px solid #fda007 !important;
  margin-top: -6rpx;
}

这样的话，在其他自定义组件或者页面使用checkbox就不会受到本次样式影响了

扩展：
关于checkbox的样式有三个固定的class选择器
.wx-checkbox-input：复选框未选中的样式
.wx-checkbox-input-checked：复选框选中的样式
.wx-checkbox-input.wx-checkbox-input-checked:before：复选框选中对号√的样式