小程序自定义组件的样式只会受到自定义组件wxss的影响, 除非以下几种情况:
A) app.wxss或者页面的wxss中使用了标签名选择器或其它一些特殊选择器.
Tips: 不推荐此种做法-> 会直接影响到页面和全部组件.
接下来结合Demo理解下这句话在说什么:
// 组件wxml
<text class="name">自定义组件</text>
// 组件wxss
.name{
font-size: 30rpx;
}
text{
color: red;
}
// 页面wxml -> 假定上述的组件名叫做test
<test></test>
<text>页面</text>
复制代码先看看效果图:
你会发现, 页面的text标签内的文本也变成了红色, 就是因为受到了组件内申明的标签名选择器的影响, 这也是为什么我们不推荐此种做法的原因.
B) 指定特殊的样式隔离选项styleIsolation
// 组件wxml
<text class="test">自定义组件</text>
// 组件wxss
.test{
color: blue;
}
// 组件js
Component({
options: {
styleIsolation: 'isolated'
}
})
// 页面wxml
<test></test>
<text class="test">页面内容区</text>
// 页面wxss
.test{
color: red;
}
复制代码首先, 看看styleIsolation的值为isolated的效果图(默认属性值)
接下来, 把styleIsolation的值改为apply-shared, 看看效果: 你会发现, 页面wxss有作用于组件, 只是样式优先级导致未显示红色.
最后, 把styleIsolation的值改为shared, 看看效果: 你会发现, 页面wxss受到组件wxss的影响成了蓝色.
styleIsolation属性
A) isolated 表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响（一般情况下的默认值）
B) 'apply-shared'表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面 -> 大白话: 父亲会影响到孩子, 但孩子不会影响到父亲(单向)
C) shared 表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。（这个选项在插件中不可用。）-> 大白话: 父子相互影响、成就彼此.
简写语法
注意: 以下两种写法2选一即可, 能实现同一效果.
// 基础写法：组件js options配置
Component({
options: {
styleIsolation: 'shared'
}
})
// 升级写法: 组件json配置
{
"component": true,
"usingComponents": {},
"styleIsolation": "shared"
}
复制代码addGlobalClass属性
到了这里, 好像没看到任何跟标题有关的内容出现耶, 那么接下来我们就看看addGlobalClass属性.
// 基础写法：组件js options配置
Component({
options: {
styleIsolation: 'apply-shared'
}
})
// 等价写法:
Component({
options: {
addGlobalClass: true
}
})
复制代码实际表现如上图apply-shared的效果图, 这里就不重复展示了.
总结: addGlobalClass: true等价于styleIsolation: apply-shared.
Tips: 若styleIsolation跟addGlobalClass同时存在时, 一方选项是失效哦, 需要注意.
最后
前端知识点零散、需要多多记录总结~
