在vue开发过程中,可能会遇到修改vant ui或者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
}
本文详细介绍了在Vue开发中,如何解决修改组件库如vantui或elementui样式无效的问题,通过使用三种不同方式的样式穿透(stylus的>>>、sass/less的/deep/及通用的::v-deep),实现对组件内部样式的精准覆盖。
1万+

被折叠的 条评论
为什么被折叠?



