博客

在小程序组件中，自定义组件的样式只受到自定义组件

wxss

的影响，不会收到全局的影响，除非有以下几种情况：

1. 
app.wxss

   或页面的
   
wxss

   中使用了标签名选择器（或一些其他特殊选择器）来直接指定样式，这些选择器会影响到页面和全部组件。通常情况下这是不推荐的做法。类似以下写法：

//app.wxss
text{
    color:red;
}

2. 指定特殊的样式隔离选项
   
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

  的自定义组件的影响。

3. 
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>