随手记:微信小程序穿透组件样式穿不过去,样式隔离
背景:
所有的display居中都给了,但是icon还是掉下来的感觉
排查原因发现,是image组件需要display: block
但是样式穿透一直穿透不过去
最终以下方法解决
加入代码穿透生效
styleIsolation可选参数
isolated 组件和调用页面相互不会影响
apply-shared 调用页面样式会影响到组件,但组件的样式不会影响到调用页面
shared 组件和页面的样式会相互影响
page-isolated 表示在这个页面禁用 app.wxss ,同时,页面的 wxss 不会影响到其他自定义组件;
page-apply-shared 表示在这个页面禁用 app.wxss ,同时,页面 wxss 样式不会影响到其他自定义组件,但设为 shared 的自定义组件会影响到页面;
page-shared 表示在这个页面禁用 app.wxss ,同时,页面 wxss 样式会影响到其他设为 apply-shared 或 shared 的自定义组件,也会受到设为 shared 的自定义组件的影响。
再穿透:
最后成功: