文章目录

• 现象描述
• • 解决方案

现象描述

• 在自定义的组件中，使用app.wxss 样式，将不会生效
• 详情请看 https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html
  
• 也就是全局样式不可以应用到子组件里面

解决方案

1. 将样式和 wxml 写在一起
2. 在 component 中定义隔离方式

Component({
    options: {
      "styleIsolation": 'apply-shared',
   }
   ...
})

• 下面是各种选项的说明 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

styleIsolation 选项从基础库版本 2.6.5 开始支持。它支持以下取值：

isolated 表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响（一般情况下的默认值）；
apply-shared 表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面；
shared 表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。（这个选项在插件中不可用。）