Vu3中样式穿透不生效处理
- 代码
- 查看F12
- 处理
- - 方法一父组件修改为单根组件
代码
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>
