"Pemilih :deep() dalam Vue3 tidak sah apabila menggunakan perpustakaan PrimeVue"

Question

Saya menggunakan vue3 dan perpustakaan PrimeVue. Apabila saya cuba mengatasi medan css komponen PrimeView menggunakan :deep() Ia hanya menggunakan perubahan saya apabila saya menggunakan gaya tidak berskop. Saya keliru mengapa ia tidak berfungsi.

Contoh kod dengan :deep():

:deep(.p-toast-message-icon) {
    margin-kanan: 10px !penting;
}


Ini tidak berfungsi. 
Tetapi apabila menggunakan gaya


Itu berkesan. 
            

Answer 1

melalui :deep选择器生成的规则会针对当前组件的子元素生效，但是p-toast dilampirkan pada elemen

, jadi kelas yang dihasilkan tidak akan memberi kesan.

Walau bagaimanapun, anda boleh menetapkan pilihan lulus untuk menghantar peraturan gaya kepada ikon:

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

atau

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

Lihat contoh dalam Kotak pasir.