styleIsolation 微信小程序父子组件样式不隔离 解决

父子组件样式默认隔离

1⃣️ 将styleIsolation 设置为 apply-shared 或 shared

Component({
  options: {
    styleIsolation: 'isolated' 
      // 默认值 isolated(启动隔离)、 
      // apply-shared(页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面) 、
      // shared(wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件)、
  }
})

2⃣️ 通过 外部样式 externalClasses 传入组件

// 父组件 wxml 传入 
<custom-component my-class="large-text" />

// 子组件 js  externalClasses 接收
Component({
  externalClasses: ['my-class']
})

3⃣️ 子组件的wxss重新引入样式文件