Vu3中样式穿透不生效处理

代码

App.vue

<template>
  <p>父组件</p>
  <hello-world></hello-world>
</template>

<script setup>
import HelloWorld from "./components/HelloWorld.vue"

</script>
<style scoped>
p{
  color: red;
}
:deep(.title){
  color: red;
  font-size: 20px;
}
</style>

HelloWorld.vue

<template>
  <p>123</p>
  <p class="title">123</p>
  <p>123</p>
</template>

<script setup>

</script>

查看F12

由于Vue3支持多个根,父组件中有多个根

处理

- 方法一父组件修改为单根组件

<template>

  <p>父组件</p>
  <hello-world></hello-world>
</template>

<script setup>
import HelloWorld from "./components/HelloWorld.vue"

</script>
<style scoped>
p{
  color: red;
}
:deep(.title){
  color: red;
  font-size: 20px;
}
</style>

- 方法二修改子组件为单根组件

<template>
  <div>
    <p>123</p>
    <p class="title">123</p>
    <p>123</p>
  </div>
</template>

<script setup>

</script>