vue样式穿透(转载)

序言

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

样式穿透

1、stylus的样式穿透

使用：（>>>）

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

例：

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

2、sass和less的样式穿透

使用：（/deep/）不生效可使用::v-deep

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

.wrapper /deep/ .el-card__header {

border-bottom: none
}

3、通用样式穿透

使用：（::v-deep）（推荐使用此种方式）

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

　　要修改的样式

}

例：

::v-deep .el-card__header {

border-bottom: none
}

最后

十分感谢原博主,原博客的地址为:

• vue样式穿透

__EOF__

本文作者：damarkday知识库
本文链接：https://www.cnblogs.com/GoodMemoryBlog/articles/14459660.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！