Vue样式中的scoped和样式穿透

scoped

在vue文件中的style标签上，有一个属性：scoped。当添加scoped属性时它的样式就只能作用于当前的组件。该属性，可以使得组件之间的样式不互相污染。

为什么需要穿透scoped

引用了第三方组件，需要在组件中局部修改第三方组件的样式，而又不想去除scoped属性造成组件之间的样式污染。此时只能通过特殊的方式，样式穿透来解决问题。

stylus穿透
使用（>>>）
外层类 >>> 想要修改的类名 {
　　要修改的样式
}
例：.content>>> .el-dialog__body {
padding: 0;
}

sass和less穿透
使用：（/deep/）
外层类 /deep/ 想要修改的类名 {
　　要修改的样式
}
例：.content /deep/ .el-dialog__body {
padding: 0;
}

通用样式穿透
使用：（::v-deep）
::v-deep 想要修改的类名 {
　　要修改的样式
}
例：::v-deep .el-dialog__body{
padding: 0;
}