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