uni-app 默认提供了许多的默认组件,同样也就不被了默认的样式,但是无法直接通过 style 中书写 CSS 样式来修改默认组件的样式,需要通过>>>或/deep/这两个穿透命令来实现,同时也设计到 scoped 关键字的设置,下面和子凡一起了解一下有关 uiniapp 的 CSS 样式。

style scoped 穿透

App.vue(样式层级高)定义样式就可以覆盖子组件或者父组件,无论有没有设置 scoped 关键字。

子组件设置 scoped 会增加私有后缀,为了保证它的唯一性不会父组件导入的 css 覆盖掉,但 App.vue 导入的 css 会覆盖掉它(特别注意)。

父组件如何穿透子组件,覆盖默认组件的样式,这时候就需要使用到穿透:>>>和/deep/

不加 scoped 直接使用穿透容易出现污染全局,所以以严谨的态度,我们需要在 style 标签上加 scoped,同时使用 deep 穿透,简单举例如下:

1
2
3
4
5
<style scoped>
/deep/ .fanly {
	font-size: 14px;
}
</style>

代码中的/deep/同样可以使用“>>>”来替换,这是两种穿透的写法,当然 style 标签中不加 scoped 也是可以成功的。

除非注明,否则均为泪雪博客原创文章,禁止任何形式转载

本文链接:https://zhangzifan.com/uniapp-css-deep-style-scoped.html

发表评论

  1. 言情库
    1楼
    言情库 6个月前 (12-25)

    不知道说什么好,还是祝疫情早点结束吧!

    • 张子凡
      回复
      张子凡 6个月前 (12-30)
      回复 @言情库 :同时我也祝你新年快乐!