Tajuk yang ditulis semula ialah: ::v-deep .v-autocomplete__content.v-menu__content dalam Vuetify tidak berfungsi dalam skop gaya Vue

Question

Saya mempunyai v-autocomplete (vuetify) yang boleh mengembangkan senarai projek

Apabila saya mengklik autolengkap untuk menaip apa yang tersedia dalam senarai item, bekas item berada tidak di tempat yang saya mahu, seperti yang ditunjukkan dalam imej di bawah (saya menggunakan contoh berikut) vuetify menunya sendiri kerana ia boleh tambah apa yang saya temui pada imej sistem berkenaan)

Dengan memilih kelas .v-autocomplete__content.v-menu__content devTools saya boleh meletakkan autolengkap seperti yang diperlukan, contohnya dengan menggunakan margin-left padanya.

Masalah saya mula berlaku apabila saya cuba lulus kelas v-autocomplete__content dalam gaya berskop, kerana saya hanya mahu menambah gaya ini pada halaman ini. Saya telah mencuba menggunakan ::v-deep dan juga >>> kerana ia telah digunakan dalam beberapa gaya lain pada halaman itu, tetapi ia tidak berfungsi.

Di bawah juga terdapat gambar medan yang dipilih menggunakan devTools untuk pemahaman yang lebih baik. Soalan sebenar saya hanya cuba menggunakan gaya dalam julat, adakah sesiapa mempunyai sebarang petua atau alternatif lain untuk mengedit seperti yang saya mahukan? Saya menggunakan Vuejs.

Sebarang bantuan dialu-alukan :)

::v-deep .v-autocomplete__content { border: 2px solid red !important; }

Saya telah mencuba menggunakan ::v-deep dengan mod >>> dan juga lulus kelas .v-autocomplete__content.v-menu__content tanpa ::v-deep

Answer 1

Jika anda melihat dalam DOM v-autocomplete__content div 的位置，您会发现它附加到您的根 v-app komponen, bukan di dalam komponen. Untuk menukar fungsi ini, Vuetify menyediakan anda dengan atribut attach di mana anda boleh menentukan v-autolengkap untuk melampirkan dirinya pada mana-mana elemen yang anda mahukan (cth. akar komponen anda). Ini akan membolehkan gaya berskop mencapai v-autolengkap

anda

<v-container fluid id="auto-complete-container">
  <v-row align="center">
    <v-col cols="4">
      <v-autocomplete
        v-model="value"
        :items="items"
        attach="#auto-complete-container"
      ></v-autocomplete>
    </v-col>
  </v-row>
</v-container>