三大样式穿透

问题

用到很多vue常用的组件库(element, vant, vuetify),虽然配好了样式但是还是需要更改其他的样式

解决

三大样式穿透 >>> , ::v-deep , /deep/

在style经常用scoped属性实现组件的私有化,所以才需要样式穿透

需要注意:

  1. ( >>> 只作用于css
  2. ::v-deep 只作用于sass
  3. /deep/ 只作用于less

示例:
1

<style lang="scss" scoped>
.conBox ::v-deep .el-input__inner{
    padding:0 10px;
}
</style>

2

<style lang="less" scoped>
.conBox /deep/ .el-input__inner{
    padding:0 10px;
}
</style>

3

<style>
.num-input {
    width: 90px;
    margin-top: 15px;
    >>> .ivu-input {
      text-align: center!important;
    }
}
</style>

三大样式穿透

posted @ 2021-03-09 22:09  易函123  阅读(178)  评论(0编辑  收藏  举报