微信小程序子组件使用父组件传入的样式

微信小程序使用externalClasses可以让父组件的样式更改到子组件里面。

子组件：

子组件js:
Component({
  externalClasses: ['my-class'],
  // 组件选项
  options: {
    styleIsolation: 'apply-shared',
  },
})

子组件wxml:
测试父组件传递的样式

父组件：

父组件wxml:


父组件wxss:
.check-child {
    background: red;
}

上面就可以使子组件使用父组件传入的样式了。
子组件定义的styleIsolation一共有三个值：
isolated 表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响（一般情况下的默认值）；
apply-shared 表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面；
shared 表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。（这个选项在插件中不可用。）
注意：我在子组件使用styleIsolation: 'shared' 时候父组件设置的样式在子组件是无效的，使用的时候需要注意