微信小程序 | 自定义组件全局样式不生效:组件样式隔离

微信小程序 | 自定义组件全局样式不生效:组件样式隔离

2021-08-11 861
下载不了?请联系网站客服提交链接错误!
增值服务:
微信小程序 | 自定义组件全局样式不生效:组件样式隔离
最近更新 2021年08月11日
资源编号 86685

微信小程序 | 自定义组件全局样式不生效:组件样式隔离

2021-08-11 小程序教程 0 861 百度已收录
限时活动VIP只需20元
增值服务:
¥ 0 钻石 开通VIP尊享优惠特权
立即下载 升级会员
详情介绍

在使用原生框架开发小程序时遇到一个问题,在 app.wxss 中定义的全局样式在自定义组件中不生效。后来发现是由于小程序组件样式隔离的配置导致的。

太长不看版

在组件的 json 文件中添加如下配置,全局样式即可生效。

// component.json
\"styleIsolation\": \"apply-shared\"

如果偏好在 js 文件中进行配置,或版本号 < 2.10.1,也可以写在 js 文件中,效果相同。

// component.js
Component({
  options: {
    styleIsolation: \'apply-shared\'
  }
})

如果版本号 < 2.6.5,可以使用如下配置代替 styleIsolation: \'apply-shared\'

// component.js
Component({
  options: {
    addGlobalClass: true
  }
})

组件样式隔离

组件的 styleIsolation 有三个可选值:

isolated
apply-shared
shared

demo 试验

为了更直观,写了一个 demo 进行了简单试验。

定义一个组件 comp ,并在页面 index 中引入组件:

<!-- comp.wxml -->
<view class=\"test1 testbox\">comp1</view>
<view class=\"test2 testbox\">comp2</view>
<view class=\"test3 testbox\">comp3</view>

<!-- index.wxml -->
<comp />
<view class=\"test3 testbox\">index3</view>

然后在全局、页面、组件中分别定义 test1, test2, test3 的颜色为红、绿、蓝色(省略了 testbox 的样式):

/* app.wxss */
.test1 {
  background-color: lightpink;
}

/* components/index.wxss */
.test2 {
  background-color: lightgreen;
}

/* components/comp.wxss */
.test3 {
  background-color: lightblue;
}

之后对组件的 styleIsolation 属性进行不同取值,结果如下:

可以看到,默认模式 isolated下,父页面和全局样式都不生效;apply-shared 模式下,页面和全局样式能作用到组件中;shared 模式下组件样式还会反过来作用到父页面上。

优先级

另外,经过测试,对于相同的选择器,样式的优先级为 组件样式 > 页面样式 > 全局样式 ,对于组件来说这基本符合直觉。不过如果组件应用了 shared,那么其中样式也会覆盖页面中的样式,这就有点奇怪。

综上,个人建议除非特殊需要,否则最好慎用 shared 模式,并且尽量减少选择器冲突和相互覆盖,以免造成不必要的灵异事故。对于需要共享的样式,可以根据情况抽取到全局或采用引入 css 文件的方式实现。

页面的隔离配置

由于小程序的页面实际上也是组件,所以同样可以设置 styleIsolation 属性,并且与自定义组件不同的是页面的默认取值为 share ,因此页面中默认可以应用全局样式。

另外,对于页面还额外增加了三个属性取值。虽然文档中有各自的描述,但我经过试验后感到十分迷惑,完全没有搞懂各自的确切作用和区别;甚至还有页面设置为 isolated / page-isolated 之后页面自己的样式都失效了这种神秘 bug,可能是实现上还存在问题。所以建议不要随便更改页面的 styleIsolation 配置,感兴趣的可以点击文末链接自行研究试验。

只有一个还算比较确定的选项,配置 page-shared 之后,页面(以及其中的组件)将屏蔽 app.wxss 中的全局样式,并且其他方面的影响应该较小,如果有需要可以尝试。

参考资料

微信官方文档 · 小程序

资源下载此资源仅限注册用户下载,请先

1、本站赞助VIP,仅需【128】元即可 ! ! ! (赞助后永久享受整站资源全部免费下载)
2、站内资源均可通过签到等任务进行免费兑换。(鼓励大家签到)
3、站内资源均来源于网络公开发表文件或网友投稿发布,如侵犯您的权益,请联系管理员处理。
4、本站所分享的源码、模板、软件工具等其他资源,都不包含技术服务,请大家谅解!
5、所有资源均收集于互联网仅供学习、参考和研究,请理解这个概念,所以不能保证每个细节都符合你的需求,也可能存在未知的BUG与瑕疵,因本站资源均为可复制品,所以不支持任何理由的退款兑现(特殊情况可退积分),请熟知后再赞助下载!收取的费用只为能长期与大家分享学习,本站为非商业性网站,纯属个人爱好!

K4资源 小程序教程 微信小程序 | 自定义组件全局样式不生效:组件样式隔离 https://www.k4sc.com/86685.html

相关文章

评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务