最近在开发一个基于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/ )的更多相关文章

  1. vue3-关于使用element-plus第三方组件库时出现的一些问题的解决方案(1)

    这只是在使用element-plus组件开发过程中遇到的第一个问题,后面遇到更多问题及解决方案时会再同步到博客上来 --------------我是分割线------------------ 今天用到 ...

  2. vs指定QT的工作目录(依赖第三方动态库时,这时vs编译出来后,运行会提示缺少动态库)good

    当一个工程依赖第三方动态库时,这时vs编译出来后,运行会提示缺少动态库.解决方法: 项目->属性->调试: 工作目录:指定程序运行时的目录 环境:指定程序运行时的环境变量 我们可以在环境变 ...

  3. 基于Vue的前端UI组件库的比对和选型

    大家好,我是张飞洪,感谢您的阅读,我会不定期和你分享学习心得,希望我的文章能成为你成长路上的垫脚石,让我们一起精进. 由于录制视频的需要,要做前端UI组件库的选型.平时国内外也见了不少基于Vue的UI ...

  4. 【Angular】关于angular引用第三方组件库无法改变其组件样式 :host ::ng-deep

    [Angular]关于angular引用第三方组件库无法改变其组件样式 :host ::ng-deep css修改:无效 .ant-input-affix-wrapper .ant-input:not ...

  5. 整理目前支持 Vue 3 的 UI 组件库 (2021 年)

    最近,让前端圈子振奋的消息莫过于 Vue 3.0 的发布,一个无论是性能还是 API 设计都有了重大升级的新版本.距离 Vue 3.0 正式版发布已经有一段时间了,相信相关生态周边库也正在适配新版本中 ...

  6. 记:使用vue全家桶 + vux组件库 打包成 dcloud 5+ app 开发过程中遇到的问题

    vue-cli 版本:2.9.6   webpack 版本:3.6.0 1. vue-cli 安装好之后,不是自动打开默认浏览器 在 config文件夹 ---> dev选项中,有个 autoO ...

  7. 解决安装vc2005运行库时提示Command line option syntax error.Type Command/?for Help

    安装vc2005运行库时提示 这是因为它要自解压到用户的临时文件夹下,如果用户名中带中文,就会报错. 简单的解决方法是,手动解压之,再安装 当然,你也可以修改用户名或者再新建个用户.

  8. 一款基于Vue的扩展性组件库 VV-UI

    github: https://github.com/VV-UI/VV-UI 演示地址: https://vv-ui.github.io/VV-UI/#/meta-info 1. LoadingBar ...

  9. Vue项目中使用基于Vue.js的移动组件库cube-ui

    cube-ui 是滴滴公司的技术团队基于 Vue.js 实现的精致移动端组件库.很赞,基本场景是够用了,感谢开源!感谢默默奉献的你们. 刚爬完坑,就来总结啦!!希望对需要的朋友有小小的帮助. (一)创 ...

随机推荐

  1. py1

    python 下载安装  https://python.org python解释性语言 python数据结构 *输入输出 print(12,34,56,end='',sep='*') input() ...

  2. shell脚本入门笔记

    转载:http://mp.weixin.qq.com/s?__biz=MzA3MTIxNzkyNg==&mid=204081791&idx=1&sn=27bb1d827e0f8 ...

  3. java ArrayList添加元素全部一样

    #开始 今天遇到了一个很神奇的事情 也即是我在用ArrayList的add方法循环加入对象的时候 发现添加的元素全部都是一样的 定位错误定位了一个下午.... 错误位置就是哪一个位置 但是就是不知道为 ...

  4. STM32 MDK C 常见易错点

    1.MDK编译器单字节的负数-1,-2,-3... ... 处理:存储,类型转换,位对齐. char 定义的变量在运算过程尤其类型转换,逻辑比大少会被当做 unsigned char 处理,这里很容易 ...

  5. 洛谷P1064 金明的预算方案(01背包)

    题目描述 金明今天很开心,家里购置的新房就要领钥匙了,新房里有一间金明自己专用的很宽敞的房间.更让他高兴的是,妈妈昨天对他说:“你的房间需要购买哪些物品,怎么布置,你说了算,只要不超过NNN元钱就行” ...

  6. java 面试题 高阶版

    1.hash 算法问题 hash(n) /服务器个数 hash 算法在服务器增加或者减少的时候,数据存取位置为发生变化: 什么是一致性hash算法? 一致性hash算法对2^32 取模,整个Hash空 ...

  7. PHP加JS实现分片上传,断点续传

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title> ...

  8. echart 重新加载

    myechart2.clear(); myechart2.setOption(options[1]);

  9. JS中的提升(即变量和函数声明移动到代码顶部)

    先看代码(第一个代码片段): console.log(a); var a = 1; 如果你认为这是一段不合法的代码,在调用console.log()的时候会输出undefined,你完全正确.但是如果 ...

  10. 创建jsp文件时报错,"javax.servlet.http.HttpServlet" was not found on the Java)

    原因: 创建jsp文件的步骤如下: 出现"javax.servlet.http.HttpServlet" was not found on the Java) 报错信息就是因为没有 ...