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重新引入样式文件

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容