前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue使用深度选择器在scoped中修改第三方样式

Vue使用深度选择器在scoped中修改第三方样式

作者头像
治电小白菜
发布2020-08-25 15:55:21
1.1K0
发布2020-08-25 15:55:21
举报
文章被收录于专栏:技术综合

问题:

当我们在写业务时, 需要修改当前页面elementUI的样式, 但是为了不想修改的样式影响到别的组件, 需要添加scoped, 但是当我们添加了scoped后, 第三方样式的class后也会被加上hash值, 该怎么处理?

解决:

使用深度选择器 >>> :

代码语言:javascript
复制
<style scoped>
.a >>> .b { /* ... */ }
</style>

上面这么写将会编译成:

代码语言:javascript
复制
.a[data-v-f3f3eg9] .b { /* ... */ }

**注意: ** 如果使用CSS预处理器, 会无法编译 >>>, 我们可以使用/deep/ 或者 ::v-deep 来代替 但/deep/dart-sass中使用会报错

参考资料

https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors

https://github.com/dart-lang/angular/issues/454

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 问题:
  • 解决:
  • 参考资料
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档