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>

 

posted @ 2023-05-21 22:56  钟文锋  阅读(33)  评论(0编辑  收藏  举报