在小程序组件中,自定义组件的样式只受到自定义组件 wxss
的影响,不会收到全局的影响,除非有以下几种情况:
app.wxss
或页面的wxss
中使用了标签名选择器(或一些其他特殊选择器)来直接指定样式,这些选择器会影响到页面和全部组件。通常情况下这是不推荐的做法。类似以下写法:
//app.wxss
text{
color:red;
}
- 指定特殊的样式隔离选项
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
的自定义组件的影响。
addGlobalClass
小程序基础库版本 2.2.3 以上支持addGlobalClass
选项,即在Component
的options
中设置addGlobalClass: true
。 这个选项等价于设置styleIsolation: apply-shared
,但设置了styleIsolation
选项后这个选项会失效。
/* 组件 custom-component.js */
Component({
options: {
addGlobalClass: true,
}
})
<!-- 组件 custom-component.wxml -->
<text class="red-text">
这段文本的颜色由 `app.wxss` 和页面 `wxss` 中的样式定义来决定
</text>