小程序组件——组件样式隔离

在小程序组件中,自定义组件的样式只受到自定义组件 wxss 的影响,不会收到全局的影响,除非有以下几种情况:

  1. app.wxss 或页面的 wxss 中使用了标签名选择器(或一些其他特殊选择器)来直接指定样式,这些选择器会影响到页面和全部组件。通常情况下这是不推荐的做法。类似以下写法:
//app.wxss
text{
    color:red;
}
  1. 指定特殊的样式隔离选项 styleIsolation
Component({
    options: {
        styleIsolation: 'isolated'
    }
})

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

  • isolated 表示启用样式隔离,在自定义组件内外,使用 class 指定的样式将不会相互影响(一般情况下的默认值);
  • apply-shared 表示页面 wxss 样式将影响到自定义组件,但自定义组件 wxss 中指定的样式不会影响页面;
  • shared 表示页面 wxss 样式将影响到自定义组件,自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。(这个选项在插件中不可用。)
使用后两者时,请务必注意组件间样式的相互影响。

如果这个 Component 构造器用于构造页面 ,则默认值为 shared ,且还有以下几个额外的样式隔离选项可用:

  • page-isolated 表示在这个页面禁用 app.wxss ,同时,页面的 wxss 不会影响到其他自定义组件;
  • page-apply-shared 表示在这个页面禁用 app.wxss ,同时,页面 wxss 样式不会影响到其他自定义组件,但设为 shared 的自定义组件会影响到页面;
  • page-shared 表示在这个页面禁用 app.wxss ,同时,页面 wxss 样式会影响到其他设为 apply-shared 或 shared 的自定义组件,也会受到设为 shared 的自定义组件的影响。
  1. addGlobalClass
    小程序基础库版本 2.2.3 以上支持 addGlobalClass 选项,即在 Componentoptions 中设置 addGlobalClass: true 。 这个选项等价于设置 styleIsolation: apply-shared ,但设置了 styleIsolation 选项后这个选项会失效。
/* 组件 custom-component.js */
Component({
    options: {
        addGlobalClass: true,
    }
})
<!-- 组件 custom-component.wxml -->
<text class="red-text">
    这段文本的颜色由 `app.wxss` 和页面 `wxss` 中的样式定义来决定
</text>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.小程序起步 (1)点击https://mp.weixin.qq.com/wxopen/waregister?a...
    GXW_Lyon阅读 3,455评论 0 0
  • 因新工作主要负责微信小程序这一块,最近的重心就移到这一块,该博客是对微信小程序整体的整理归纳以及标明一些细节点,初...
    majun00阅读 7,450评论 0 9
  • 参数options配置组件wxml模板<view class="wrapper"> <view>这里是组...
    小碗吃不了阅读 1,889评论 0 0
  • 2018年8月15日,晴 你是不是也会有这么一段时间,会问自己读了这么多年的书到底有什么用? 突然想到学校...
    鼓励吧阅读 174评论 0 6
  • 1.表里如一 有些父母对孩子,在家暴跳如雷,在外谦和有礼,这样很不好,次数多了孩子很会钻空子,对孩子习惯的培养非常...
    青杏路涂阅读 135评论 0 0