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
}

最后

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

posted @ 2021-02-28 16:52  DAmarkday  阅读(158)  评论(0编辑  收藏  举报