关于样式穿透

vue单文件组件样式隔离scoped前提下, 有五种样式穿透写法

vue2语法提供3种 >>> /deep/ ::v-deep
父组件选择器 >>> 子组件选择器 { 子组件样式 }
/deep/ 子组件选择器 { 子组件样式 }
::v-deep 子组件选择器 { 子组件样式 }

vue3语法提供2种 :deep() ::v-deep()
:deep(子组件选择器){ 子组件样式 }
::v-deep(子组件选择器){ 子组件样式 }

经测试, 这五种穿透语法在vue2和vue3中都兼容

<style scoped>
  /* >>> 只对css原生样式穿透 */
  #app >>> h2 {
    color: red;
  }
  /* /deep/ css/less/sass通用样式穿透 */
  /deep/ h2{
    background-color: #42b983;
  }
  /* ::v-deep css/less/sass通用样式穿透 */
  ::v-deep h2{
    border-radius: 10px;
  }
  /* :deep() vue3新增  css/less/sass通用样式穿透  */
  :deep(h2){
    font-size: 30px;
  }
  /* ::v-deep() vue3新增  css/less/sass通用样式穿透 */
  ::v-deep(h2){
    line-height: 50px;
  }
</style>

注意: 有时,第三方组件库中使用穿透改子组件样式也不生效, 如修改vant3中的NavBar标题样式
.van-nav-bar__title{ color: red; }
不生效 可能是此标签嵌套的层级太深, 样式查找不准确, 在前边加上父标签限制即可
#app .van-nav-bar .van-nav-bar__title{ color: red; }
生效