vue|Element-UI默认样式改不了（怎么办） css|javascript|js|html

在用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; }