Vue——解决使用第三方组件库时无法修改默认样式的问题(使用 /deep/ )
最近在开发一个基于Vue的后台管理系统,其中使用了element-ui第三方ui组件库。使用过组件库的人都知道,第三方组件往往会有一些默认的样式,而有些又是我们想要改变的。
一、基础(了解 <style></style> 的 scoped 属性)
在编写Vue代码过程中,为了不让父组件相同样选择器名称设置的样式影响到子组件,我们往往会给 <style></style> 标签设置 scoped 属性。但是如果设置了scoped属性,在该组件内的 Css 就只能作用于当前组件中的元素。
实际上,它是通过使用 PostCSS 来实现以下转换:
<template>
<div class="example">hi</div>
</template> <style scoped>
.example {
color: red;
}
</style>
转换为:
<template>
<div class="example" data-v-f3f3eg9>hi</div>
</template> <style>
.example[data-v-f3f3eg9] {
color: red;
}
</style>
当然,我们也可以混合地使用本地样式和全局样式:
<style>
/* 全局样式 */
</style> <style scoped>
/* 本地样式 */
</style>
关于子组件根元素的样式结果,还需要单独叙述一下:
使用 scoped
后,父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件可以从布局的角度出发,调整其子组件根元素的样式。
二、问题(使用第三方组件库时修改默认样式)
接下来,就介绍和解决一下,使用第三方组件库时遇到的问题——无法修改默认样式。
在项目中使用 element-ui 组件库,设置样式时发现根本无法覆盖掉默认样式,开始我也以为是选择器的权重问题,后来发现,无论怎么加类名,样式都无法生效。现在提供如下的解决方案:
使用深度作用选择器:如果你希望 scoped
样式中的一个选择器能够作用得“更深”,例如影响子组件,你可以使用 >>>
操作符:
<style scoped>
.a >>> .b {
/* 需要设置给子组件b的样式 */
color: red;
}
</style>
上述代码将会编译成:
.a[data-v-f3f3eg9] .b {
/* 需要设置给子组件b的样式 */
color: red;
}
但是,有些像 Sass 之类的预处理器无法正确解析 >>>
。这种情况下你可以使用 /deep/
或 ::v-deep
操作符取而代之——两者都是 >>>
的别名,同样可以正常工作。
<style scoped>
.a /deep/ .b {
/* 需要设置给子组件b的样式 */
color: red;
}
</style>
如果使用了上面的 /deep/ 后发现样式依然没有生效,那么就给它再来个最高权重( !important ):
<style scoped>
.a /deep/ .b {
/* 需要设置给子组件b的样式 */
color: red !important;
}
</style>
Vue——解决使用第三方组件库时无法修改默认样式的问题(使用 /deep/ )的更多相关文章
- vue3-关于使用element-plus第三方组件库时出现的一些问题的解决方案(1)
这只是在使用element-plus组件开发过程中遇到的第一个问题,后面遇到更多问题及解决方案时会再同步到博客上来 --------------我是分割线------------------ 今天用到 ...
- vs指定QT的工作目录(依赖第三方动态库时,这时vs编译出来后,运行会提示缺少动态库)good
当一个工程依赖第三方动态库时,这时vs编译出来后,运行会提示缺少动态库.解决方法: 项目->属性->调试: 工作目录:指定程序运行时的目录 环境:指定程序运行时的环境变量 我们可以在环境变 ...
- 基于Vue的前端UI组件库的比对和选型
大家好,我是张飞洪,感谢您的阅读,我会不定期和你分享学习心得,希望我的文章能成为你成长路上的垫脚石,让我们一起精进. 由于录制视频的需要,要做前端UI组件库的选型.平时国内外也见了不少基于Vue的UI ...
- 【Angular】关于angular引用第三方组件库无法改变其组件样式 :host ::ng-deep
[Angular]关于angular引用第三方组件库无法改变其组件样式 :host ::ng-deep css修改:无效 .ant-input-affix-wrapper .ant-input:not ...
- 整理目前支持 Vue 3 的 UI 组件库 (2021 年)
最近,让前端圈子振奋的消息莫过于 Vue 3.0 的发布,一个无论是性能还是 API 设计都有了重大升级的新版本.距离 Vue 3.0 正式版发布已经有一段时间了,相信相关生态周边库也正在适配新版本中 ...
- 记:使用vue全家桶 + vux组件库 打包成 dcloud 5+ app 开发过程中遇到的问题
vue-cli 版本:2.9.6 webpack 版本:3.6.0 1. vue-cli 安装好之后,不是自动打开默认浏览器 在 config文件夹 ---> dev选项中,有个 autoO ...
- 解决安装vc2005运行库时提示Command line option syntax error.Type Command/?for Help
安装vc2005运行库时提示 这是因为它要自解压到用户的临时文件夹下,如果用户名中带中文,就会报错. 简单的解决方法是,手动解压之,再安装 当然,你也可以修改用户名或者再新建个用户.
- 一款基于Vue的扩展性组件库 VV-UI
github: https://github.com/VV-UI/VV-UI 演示地址: https://vv-ui.github.io/VV-UI/#/meta-info 1. LoadingBar ...
- Vue项目中使用基于Vue.js的移动组件库cube-ui
cube-ui 是滴滴公司的技术团队基于 Vue.js 实现的精致移动端组件库.很赞,基本场景是够用了,感谢开源!感谢默默奉献的你们. 刚爬完坑,就来总结啦!!希望对需要的朋友有小小的帮助. (一)创 ...
随机推荐
- 网络技能大赛A卷测试
这个测试对我来言有些难度,短时间内做不了太多.首先是思路的理清,登录后的界面有好几种,而且公文的状态也有好几种.理清思路就花了一些时间 然后大致的框架做了做,然后将用户的增删改查还有公文的增删改查写了 ...
- angular 页面中引入静态 PDF 文件
在web开发时我们有时会需要在线预览PDF内容,在线嵌入pdf文件 常用的几种PDF预览代码片段如下: 方法一: <object type="application/pdf" ...
- 记一道简单的re--BUUctf reverse1
1.首先拖进ida里,看到了左面一百多function...还是shift+f12 查看敏感字符串吧 2.发现了这两个比较可疑的字符串,然后双击this is the right flag 进入到了他 ...
- Github Pull Request的提出与采纳
这一文来简要介绍一下Github Pull Request(以下简称PR)的使用方法: 作为PR的提出者,如何对某个仓库提交PR,如何根据仓库管理者对所提交PR的反馈对PR进行完善 作为PR的接收者, ...
- django removing hardcoded URLs in template --- 使用变量,把url放在变量中 {% url 'namespace:name' %}
urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^votes/', include("polls.urls", na ...
- js克隆一个对象
我们知道,对象类型在赋值的过程中其实是复制了地址,所以如果改变了一方,其他都会被改变.我们应该如何克隆一个对象,并且避免这种现象的发生呢? 方法一:Object.assign function cop ...
- python 的集合
set 的特点: 把不同的元素组合在一起,元素值必须是可哈希不可变的 set 的创建 s = set ('alex li') print(s) 表现形式:去重 {'e', 'i', ' ', 'l' ...
- 【HTML】输入密码访问
<script> (function(){ if('{{ page.password }}'){ if (prompt('请输入文章密码') !== '{{ page.password } ...
- 拥抱高通的联想,真的能靠5G突围?
编辑 | 于斌 出品 | 于见(mpyujian) 2016年,对于常年自我标榜为"民族企业"的联想来说是品牌口碑的"转折之年".它在这一年的5G信道编码标准方 ...
- Apache POI详解
一 :简介 开发中经常会设计到excel的处理,如导出Excel,导入Excel到数据库中,操作Excel目前有两个框架,一个是apache 的poi, 另一个是 Java Excel Apache ...