Vue3中:deep()选择器操作PrimeVue组件样式不生效问题咨询

问题出在PrimeVue的Toast组件默认挂载到document.body上，不在当前组件的DOM树范围内。Vue的scoped样式会给组件内元素添加唯一的data-v-xxx属性，样式仅对带该属性的元素生效——而挂载到body的Toast元素没有这个属性，所以哪怕用:deep()也无法穿透作用域。

方法1：指定Toast的挂载目标（推荐） #

利用PrimeVue Toast的target属性，把它挂载到当前组件内的某个元素上，这样Toast的DOM就会继承组件的data-v属性，:deep()就能生效了：

<template>
  <!-- 用来挂载Toast的容器 -->
  <div ref="toastContainer"></div>
  <Toast position="bottom-right" :target="toastContainer" />
</template>

<script setup>
import { ref } from 'vue';
const toastContainer = ref(null);
</script>

<style scoped>
:deep(.p-toast-message-icon) {
  margin-right: 10px !important;
}
</style>

方法2：使用全局样式但限定作用域 #

如果不想修改挂载目标，可以用不带scoped的style，但给样式加个全局唯一的前缀，避免污染其他组件：

<style>
/* 假设你的应用根组件有个唯一类名app-root，或者用页面独有的类 */
.app-root .p-toast-message-icon {
  margin-right: 10px !important;
}
</style>

内容的提问来源于stack exchange，提问作者Noy Gafni