vue中样式穿透

在Vue项目中，当我们引入第三方组件库时(如使用element-ui)，需要在局部组件中修改第三方组件库样式，而又不想去除scoped属性造成组件之间的样式覆盖。这时我们可以通过特殊的方式穿透scoped

1、stylus的样式穿透 使用 >>>

备注: 不太推荐使用这种方式,据说有点问题！

.wrapper >>> .swiper-pagination-bullet-active {
   		background: #fff
}

2、sass 和 less 的样式穿透

这俩个常用的样式穿透的方式 有俩种 分别是 /deep/ 与 ::v-deep

外层容器 /deep/ 组件 { }

外层容器 ::v-deep 组件 { }

::v-deep 与 /deep/ 都是深度选择器(样式穿透)，都能实现对组件内部的样式修改；但是具体有什么区别，公司同事主张使用 ::v-deep，说是能加快编译速度，但是我在网上没有找到相关资料,使用上就是 如果你用 /deep/ 没有生效,换一种 试试 ::v-deep 一般都是可以的.

.Userdescriptions /deep/ .ant-descriptions-item-content {
  border-color: #fff !important;
}

.userstatus ::v-deep button {
  height: 25px;
}
::v-deep .ant-switch::after {
  height: 21px;
  width: 21px;
}

Less 和 sacc 都可以进行样式叠加的写法

使用样式穿透的时候 写法 会有些不一样

还是上面的 样式 使用 叠加的方式 在写一次

.userstatus ::v-deep {
  button {
    height: 25px;
  }
  .ant-switch::after {
    height: 21px;
    width: 21px;
  }
}

注意: 在写之前保证嵌套层级正确