微信小程序-组件样式隔离
2024-07-07 10:00 阅读(307)

一.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:复选框选中对号√的样式


                       

https://blog.csdn.net/weixin_42284031/article/details/140164527