最近在使用 Ant design Vue的时候, 经常会出现样式无法修改的问题,在通过百度查询后发现是scopred的问题.
scoped看起来很好用，在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;
}
}
