爱站云博客 - 好东西不私藏,大家一起分享!爱站云 用心做
广告位 后台主题配置管理

网站首页 爱站云收录网 资源教程 正文

uni-app 如何通过穿透修改默认组件 CSS 样式及设置 scoped
站点名称:uni-app 如何通过穿透修改默认组件 CSS 样式及设置 scoped 所属分类:资源教程 浏览次数:65 次 站点域名: 站长QQ: 收录日期:2021-04-15 百度权重: 360权重: 搜狗权重: 关键词:uni-app 
站点信息

站点名称:uni-app 如何通过穿透修改默认组件 CSS 样式及设置 scoped

站点域名:

站点关键词:uni-app 

站点描述:

温馨提示
温馨提示:如果贵站想上百度,希望贵站能上本页面一个友情链接,感谢您对本站的支持!
<a href="https://aizhancloud.com/" target="_blank">爱站云</a>
正文

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

image.png

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 也是可以成功的。


< 爱站云SEO >
本站所有文章,未经允许一律不允许转载,违者后果自负
本站为SEO教学博客,学到东西应该懂得感恩作者 无脑喷子永封IP段+删帐号所有评论
本站部分文章存在于网上收集,如侵犯您的权利,请告知管理员,我们会及时删除,并向您赔礼道歉.

酷站网爱站云 官方QQ群:333914614

本文暂时没有评论哦(●'◡'●)

欢迎 发表评论:

温馨提示:(登陆后才可以评论哦!点我QQ登录哦,若已登录请忽略)。
«   2021年5月   »
12
3456789
10111213141516
17181920212223
24252627282930
31
网站分类
搜索
最新留言
文章归档
标签列表