补充

样式穿透

参考：

深度作用选择器

组件模板和样式

样式穿透：即 scoped 的时候，父组件的样式可以穿透到子组件中。

样式穿透的原理：scoped 就是加上一个码，样式穿透就是把这个码去掉

// scoped
.example[data-v-5558831a] {
  color: red;
}
// 样式穿透后
.example{
  clolor: red;
}

开发环境：scss + uniapp 开发微信小程序

遇到的问题：父组件(非页面 vue)样式无法穿透到子组件中。就是自定义组件样式无法穿透到自定义组件中。

注意：scss 只能使用 /deep/ 穿透，>>> 无效。

本以为是 uniapp 的锅，后来发现是微信小程序的锅。

微信小程序有样式隔离：

默认情况下，自定义组件的样式只受到自定义组件 wxss 的影响。除非以下两种情况：

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

即，自定义组件的样式只受全局样式(App.vue)和页面样式(没有使用 scoped)的情况下，而不受父组件样式的影响，即使使用样式穿透。

继续翻文档发现可以使用微信小程序外部样式类来解决

首先在子组件中声明使用外部样式，并在组件中使用此 class

// FooterPanel.vue
export default {
  externalClasses: ['custom-class']
}

<view class="custom-class"></view>

然后在父组件中使用样式穿透，并传入此 class 名称

<footer-panel custom-class="footer-index" />

<style lang="scss" scoped>
  /deep/ .footer-index {
    height: 212rpx;
  }
</style>

scoped 情况下使用样式穿透，否则不用

也有其他方案，此方案较好。

最终使用方式：

使用混入

// mixin.js
export const componentsCustom = {
  externalClasses: ['custom-class']
}

组件中，导入混入

import {
  componentsCustom
} from '@/common/mixin/mixin.js';
export default {
  mixins: [componentsCustom]
}