Element-UI默认样式改不了？怎么办

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