Mengapa Vue.js Saya ::v-deep, >>>, dan Pemilih Dalam Tidak Berfungsi?

>>, dan Pemilih Dalam Berfungsi? " />

Menyelesaikan masalah Vue.js ::v-deep, >>> dan Pemilih Dalam

Latar Belakang

Vue.js menyediakan cara untuk menggayakan elemen dalam komponen bersarang menggunakan pemilih dalam seperti ::v-deep, >>>, dan :deep Walau bagaimanapun, isu timbul apabila pemilih ini dilaksanakan.

Masalah

Percubaan untuk menggunakan ::v-deep atau >. ;>> untuk menyasarkan elemen kanak-kanak dari dalam komponen Vue tidak menyebabkan peraturan gaya diserahkan secara verbatim pelayar.

Penyelesaian

Vue 2.0 - 2.6

Sass: Gunakan ::v-deep

::v-deep .child-class {
  background-color: #000;
}

Tanpa Sass: Gunakan >>>

>>> .child-class {
  background-color: #000;
}

Pastikan teg