在用vue开发项目过程中，我们总是避免不了的会使用到elementUI，它里面提供的一些组件都为我们的开发带来了很大的便利，但是，当有时候我们需要使用这些组件的同时又想要修改下组件的UI样式。比如：
一个分页器，我想要修改它下图中红框区域，想把它左右边距调大
文章图片
找到它的类名，我们一顿操作。。。
文章图片
文章图片
文章图片
完了发现没有变化
文章图片
这是为什么呢？
原来是因为在Vue文件中的style标签上有一个特殊的属性：scoped。当一个style有这个标签，它的样式就只能作用于当前的Vue组件，可以使组件的样式不相互污染。
解决方案：
1. 去掉scoped，但此方法可能会造成全局污染
2. 将修改的样式放在控制全局样式css文件中
3. 写一个新的style标签（注意不要scoped），在新的标签里去修改样式
4. 样式穿透（本人经常使用）
- stylus的样式穿透 使用 >>>
-
.wrapper >>> .swiper-pagination-bullet-active { background: #fff }
-
- sass 和 less 的样式穿透
-
.Userdescriptions /deep/ .ant-descriptions-item-content { border-color: #fff !important; }// 上面不起作用换下面 ::v-deep .ant-switch::after { height: 21px; width: 21px; }
-
推荐阅读
- html|html 字符画,字符画
- 完美的地图（使用D3.js制作精美的Web地图）
- 语言|各种编程语言铺天盖地，有函数式语言、面向对象的语言、动态语言、编译语言
- javascript 中搜索数组的四种方法
- vue.js|vue基础入门之侦听器、计算属性、vue-cli、vue组件
- 卡拉云|最好用的 7 款 Vue admin 后台管理系统测评
- Vue实战--电商后台管理系统|Vue实战之 3. 登录/退出功能
- 2-前端技术栈|JavaScript框架从入门到精通
- 前端|浅析瀑布流布局及其原理