vue样式穿透

vue样式穿透
在vue开发过程中，可能会遇到修改element ui组件样式的时候，无效的问题，在网页检查页面元素的时候发现自己写的样式不生效，原因是因为中scoped的问题导致，所以我们需要用到样式穿透：

1、stylus的样式穿透 使用：（>>>）

外层类 >>> 想要修改的类名 {

要修改的样式

}

例：.wrapper >>> .el-card__header {
border-bottom: none
}

2、sass和less的样式穿透 使用：（/deep/）

外层类 /deep/ 想要修改的类名 {
　　要修改的样式
}

例：.wrapper /deep/ .el-card__header {
border-bottom: none
}

3、通用样式穿透 使用：（::v-deep）

::v-deep 想要修改的类名 {
　　要修改的样式
}

例：::v-deep .el-card__header {
border-bottom: none
}