"使用PrimeVue庫時，Vue3中的:deep()選擇器無效"

Question

我正在使用vue3和PrimeVue庫。當我嘗試使用:deep()選擇器覆蓋PrimeView組件的css字段時，它沒有任何效果。只有當我使用非作用域樣式時，它才會套用我的變更。我對為什麼它不起作用感到困惑。

帶有:deep()的範例程式碼：

<template>
    <Toast position='buttom-right'/>
</template>

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

這樣不起作用。

但當使用沒有作用域的style時，就像這樣：

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

這樣就起作用了。

Answer 1

透過:deep選擇器產生的規則會針對目前元件的子元素生效，但是p-toast是附加到元素上的，所以產生的類將沒有效果。

然而，您可以設定傳遞選項將樣式規則傳遞給圖示：

<Toast
    :pt="{
        icon: { style: 'marginRight: 10px !important;' }
    }"
/>

或

<Toast
    :pt="{
        icon: { class: 'mr-2' }
    }"
/>

在Sandbox中查看範例。