vue父子组件样式穿透

·  阅读 846

vue父组件样式设置了scoped的情况下

父组件循环遍历子组件时,子组件统一有border-bottom:1px的样式,此时要让最后一个子组件不需要这个样式,需要在父组件中编写样式影响到子组件

父组件

    <div class="content mu-background-color">
      <div v-for="(item,index) in list" :key="index">
        <replyList :data="item"></replyList>
      </div>
    </div>
    
  .content {
    padding: 15px 16px;
    & :not(:last-child) {
      .reply-list {
        /deep/ .item-file {
          border-bottom: 1px solid;
        }
      }
    }
  }
复制代码

子组件

<style lang='less' scoped>
.reply-list {
margin-bottom: 8px;
.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.item-detail {
  margin-top: 15px;
  margin-left: 33px;
}
.item-file {
  margin-top: 10px;
  margin-left: 33px;
  .download {
    padding: 12px;
    display: flex;
    margin-bottom: 10px;
    align-items: center;
    .name {
      margin: 0 20px 0 5px;
    }
  }
}
}
</style>
复制代码

添加**/deep/**实现样式穿透,即使style设置了scoped父组件也能控制子组件样式

以上,如有不对,欢迎指正。

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改