最近在开发一个基于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. 网络技能大赛A卷测试

    这个测试对我来言有些难度,短时间内做不了太多.首先是思路的理清,登录后的界面有好几种,而且公文的状态也有好几种.理清思路就花了一些时间 然后大致的框架做了做,然后将用户的增删改查还有公文的增删改查写了 ...

  2. angular 页面中引入静态 PDF 文件

    在web开发时我们有时会需要在线预览PDF内容,在线嵌入pdf文件 常用的几种PDF预览代码片段如下: 方法一: <object type="application/pdf" ...

  3. 记一道简单的re--BUUctf reverse1

    1.首先拖进ida里,看到了左面一百多function...还是shift+f12 查看敏感字符串吧 2.发现了这两个比较可疑的字符串,然后双击this is the right flag 进入到了他 ...

  4. Github Pull Request的提出与采纳

    这一文来简要介绍一下Github Pull Request(以下简称PR)的使用方法: 作为PR的提出者,如何对某个仓库提交PR,如何根据仓库管理者对所提交PR的反馈对PR进行完善 作为PR的接收者, ...

  5. django removing hardcoded URLs in template --- 使用变量,把url放在变量中 {% url 'namespace:name' %}

    urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^votes/', include("polls.urls", na ...

  6. js克隆一个对象

    我们知道,对象类型在赋值的过程中其实是复制了地址,所以如果改变了一方,其他都会被改变.我们应该如何克隆一个对象,并且避免这种现象的发生呢? 方法一:Object.assign function cop ...

  7. python 的集合

    set  的特点: 把不同的元素组合在一起,元素值必须是可哈希不可变的 set 的创建 s = set ('alex li') print(s) 表现形式:去重 {'e', 'i', ' ', 'l' ...

  8. 【HTML】输入密码访问

    <script> (function(){ if('{{ page.password }}'){ if (prompt('请输入文章密码') !== '{{ page.password } ...

  9. 拥抱高通的联想,真的能靠5G突围?

    编辑 | 于斌 出品 | 于见(mpyujian) 2016年,对于常年自我标榜为"民族企业"的联想来说是品牌口碑的"转折之年".它在这一年的5G信道编码标准方 ...

  10. Apache POI详解

    一 :简介 开发中经常会设计到excel的处理,如导出Excel,导入Excel到数据库中,操作Excel目前有两个框架,一个是apache 的poi, 另一个是 Java Excel Apache ...