42 scoped样式穿透

scoped虽然避免了组件间样式污染,但是很多时候我们需要修改组件中的某个样式,但是又不想去除scoped属性

  1. 使用/deep/
    <!-- Parent -->
    <template>
    <div class="wrap">
        <Child />
    </div>
    </template>
    
    <style lang="scss" scoped>
    .wrap /deep/ .box{
        background: red;
    }
    </style>
    
    <!-- Child -->
    <template>
        <div class="box"></div>
    </template>
  1. 使用两个style标签
    <!-- Parent -->
    <template>
    <div class="wrap">
        <Child />
    </div>
    </template>
    
    <style lang="scss" scoped>
    /* 其他样式 */
    </style>
    <style lang="scss">
    .wrap .box{
      background: red;
    }
    </style>
    
    <!-- Child -->
    <template>
      <div class="box"></div>
    </template>
Last Updated:
Contributors: leeguooooo