小程序中自定义组件的样式隔离

1.样式隔离

默认情况下，在小程序中，自定义组件的样式类，只对自定义组件内的节点有效。页面的样式类，只对页面的节点有效。两者之间是相互隔离的。

全局样式类跟自定义组件样式类也是相互隔离的。全局样式类可以影响页面样式，但是无法影响自定义组件。

比如在页面的wxss中，我们定义了如下的样式。

页面wxss样式

css 复制代码

.main{
  padding: 20px;
}
.red{
  color: red;
}
.bold{
  font-weight: bold;
}
.black{
  color: black;
}
.blue{
  color: blue;
}

在页面上我们有一个自定义组件test,如果在test组件中使用这些样式，比如使用 red，如果我们不修改小程序配置的话，默认情况下是没有效果的，

页面代码

html 复制代码

<view class="main">
	<test my-class="red bold" />
</view>

test自定义组件代码

html 复制代码

<view class="com-main">
	<view class="txt red">我是文本1</view>
	<view class="txt black">我是文本2</view>
	<view class="txt blue">我是文本3</view>
</view>

效果如下

可以看到完全没有效果，出现这种情况的原因，就是因为小程序中自定义组件和页面的样式是隔离的，不共享的。

使用全局样式也不行，全局样式跟自定义组件内的样式也是隔离的。

如果想在自定义组件中使用页面定义的样式类，有以下几种方法。

2.修改样式隔离选项styleIsolation

这个是从基础库版本 2.10.1 开始支持的。它有如下几个配置

isolated 表示启用样式隔离，自定义组件的默认值就是这个。
apply-shared 表示页面的样式可以影响到自定义组件，自定义组件的样式无法影响页面。
shared 表示页面样式将影响到自定义组件，自定义组件的样式也会影响到页面和其他设置为apply-shared和shared的自定义组件。

如果页面是使用Component构造器创建的话，其默认值就不是isolated了而是shared。除了上述几个隔离选项可以使用外，还有以下几个隔离选项可以使用。

page-isolated 表示在这个页面禁用 app.wxss ，同时，页面的 wxss 不会影响到其他自定义组件；
page-apply-shared 表示在这个页面禁用 app.wxss ，同时，页面 wxss 样式不会影响到其他自定义组件，但设为 shared 的自定义组件会影响到页面；
page-shared 表示在这个页面禁用 app.wxss ，同时，页面 wxss 样式会影响到其他设为 apply-shared 或 shared 的自定义组件，也会受到设为 shared 的自定义组件的影响。

2.1 设置方式

样式隔离选项styleIsolation 可以在组件的json文件中设置，也可以在Component的options选项中配置。

json中配置

json 复制代码

{
  "component": true,
  "styleIsolation": "apply-shared"
}

Component的options中配置

js 复制代码

Component({
  options: {
    styleIsolation: 'isolated'
  }
})

效果如下

2.2 addGlobalClass

小程序基础库版本 2.2.3 以上支持 addGlobalClass 选项。即在 Component 的 options 中设置 addGlobalClass: true 。这个选项等价于设置 styleIsolation: apply-shared ，但设置了 styleIsolation 选项后这个选项会失效。

php 复制代码

/* 组件 custom-component.js */
Component({
  options: {
    addGlobalClass: true,
  }
})

3.外部样式类 externalClasses

如果只希望自定义组件使用部分外部（页面或者全局）样式，可以考虑使用外部样式类。使用方法如下：

3.1 定义要使用的class名称。

在组件的Component中定义要使用的class名称,比如这里我们定义名称为 my-class。注意不要使用驼峰命名法。

js 复制代码

Component({
  externalClasses:['my-class'],
 })

3.2 使用定义的class

修改后组件的代码如下，在"我是文本1"上添加了my-class

html 复制代码

<view class="com-main">
	<view class="txt my-class">我是文本1</view>
	<view class="txt black">我是文本2</view>
	<view class="txt blue">我是文本3</view>
</view>

3.3 在组件上添加要接受的外部样式

页面代码。这里我们使用页面上的red和bold两个样式，把这两个样式赋值给my-class属性，这样就可以了。

html 复制代码

<view class="main">
	<test my-class="red bold" />
</view>

页面样式

css 复制代码

.main{
  padding: 20px;
}
.red{
  color: red;
}
.bold{
  font-weight: bold;
}
.black{
  color: black;
}
.blue{
  color: blue;
}

组件的my-class属性，就相当于页面上的red和bold样式。

效果如下，因为"我是文本2"和"我是文本3"没有使用外部样式，所以就没有效果。

4. 引用页面和父组件样式

如果要引用页面的样式类，我们可以使用波浪号~,如果要引用父组件的样式类，我们可以使用^。

比如我们想使用页面的red样式类，可以这样使用。

test组件代码

html 复制代码

<view class="com-main">
	<view class="txt ~red">我是文本1</view>
	<view class="txt black">我是文本2</view>
	<view class="txt blue">我是文本3</view>
</view>

页面代码

html 复制代码

<view class="main">
	<test/>
</view>

效果如下：

因为"我是文本1"使用了~引用了页面上red样式，所以它变成了红色。其他文本则默认黑色。