小程序 | 自定义组件如何使用全局样式？

官方文档：

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html#%E7%BB%84%E4%BB%B6%E6%A0%B7%E5%BC%8F%E9%9A%94%E7%A6%BB

导语：

由于组件样式隔离，所以小程序app.wxss 中的样式、组件所在页面的的样式对自定义组件是无效的。

解决方案：

更改组件样式隔离选项。
在组件的 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：接收外部样式，同时组件内的样式会共享到页面