小程序自定义组件全局样式不生效的解决方法

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› JavaScript›JavaScript编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

太长不看版

在组件的 json 文件中添加如下配置，全局样式即可生效。

// component.json
"styleIsolation": "apply-shared"

如果偏好在 js 文件中进行配置，或版本号 < 2.10.1，也可以写在 js 文件中，效果相同。

// component.js
Component({
  options: {
    styleIsolation: 'apply-shared'
  }
})

如果版本号 < 2.6.5，可以使用如下配置代替 styleIsolation: 'apply-shared'

// component.js
Component({
  options: {
    addGlobalClass: true
  }
})

组件样式隔离

组件的 styleIsolation 有三个可选值：

isolated：默认值，组件内外的样式互不影响
apply-shared：接收外部（包括父页面和全局）的样式，但组件内的样式不影响外部
shared：接收外部样式，同时组件内的样式会共享到页面

demo 试验

为了更直观，写了一个 demo 进行了简单试验。

定义一个组件comp，并在页面 index 中引入组件：

<!-- comp.wxml -->
<view class="test1 testbox">comp1</view>
<view class="test2 testbox">comp2</view>
<view class="test3 testbox">comp3</view>

<!-- index.wxml -->
<comp />
<view class="test3 testbox">index3</view>

然后在全局、页面、组件中分别定义 test1, test2, test3 的颜色为红、绿、蓝色（省略了 testbox 的样式）：

/* app.wxss */
.test1 {
  background-color: lightpink;
}

/* components/index.wxss */
.test2 {
  background-color: lightgreen;
}

/* components/comp.wxss */
.test3 {
  background-color: lightblue;
}

之后对组件的 styleIsolation 属性进行不同取值，结果如下：

可以看到，默认模式 isolated下，父页面和全局样式都不生效；apply-shared 模式下，页面和全局样式能作用到组件中；shared 模式下组件样式还会反过来作用到父页面上。

优先级

另外，经过测试，对于相同的选择器，样式的优先级为组件样式 > 页面样式 > 全局样式，对于组件来说这基本符合直觉。不过如果组件应用了 shared，那么其中样式也会覆盖页面中的样式，这就有点奇怪。

综上，个人建议除非特殊需要，否则最好慎用 shared 模式，并且尽量减少选择器冲突和相互覆盖，以免造成不必要的灵异事故。对于需要共享的样式，可以根据情况抽取到全局或采用引入 css 文件的方式实现。

页面的隔离配置

由于小程序的页面实际上也是组件，所以同样可以设置 styleIsolation 属性，并且与自定义组件不同的是页面的默认取值为 share，因此页面中默认可以应用全局样式。

另外，对于页面还额外增加了三个属性取值。虽然文档中有各自的描述，但我经过试验后感到十分迷惑，完全没有搞懂各自的确切作用和区别；甚至还有页面设置为 isolated / page-isolated 之后页面自己的样式都失效了这种神秘 bug，可能是实现上还存在问题。所以建议不要随便更改页面的 styleIsolation 配置，感兴趣的可以点击文末链接自行研究试验。

只有一个还算比较确定的选项，配置 page-shared 之后，页面（以及其中的组件）将屏蔽 app.wxss 中的全局样式，并且其他方面的影响应该较小，如果有需要可以尝试。