• vue单文件中scoped样式如何穿透?


      在vue文件中的style标签上,有一个特殊的属性:scoped。当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组件元素。通过该属性,可以使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped,相当于实现了样式的模块化。

      但当引用第三方组件,需要在组件中局部修改第三方组件的样式,而又不想去除scoped属性造成组件之间的样式污染。此时只能通过特殊的方式,穿透scoped。处理方式如下:

      第一种方式:

        (1)使用 >>> 操作符

            外层  >>>  第三方组件 {  样式  }

            <style scoped>

          .a >>> .b { /* ... */ }

               </style>

        (2)使用 /deep/ 操作符

            当使用 sass/scss之类的预处理器无法正确解析 >>>,可以使用/deep/ 操作符或者::v-deep

            外层  /deep/  第三方组件 {  样式  }

            <style scoped>

              .a /deep/ .b { /* ... */ }

               </style>    

    查看官网链接:https://vue-loader.vuejs.org/zh/guide/scoped-css.html#%E6%B7%B1%E5%BA%A6%E4%BD%9C%E7%94%A8%E9%80%89%E6%8B%A9%E5%99%A8

  • 相关阅读:
    【统计学】第七章
    【统计学】第六章
    【统计学】第五章
    【统计学】第四章
    【统计学】第三章
    【统计学】第二章
    MYSQL基础
    股票数据Scrapy爬虫
    Scrapy爬虫基本使用
    Scrapy爬虫框架
  • 原文地址:https://www.cnblogs.com/changxue/p/9901902.html
Copyright © 2020-2023  润新知