重寫後的標題為：在 Vue 的樣式作用域中，Vuetify 中的 ::v-deep .v-autocomplete__content.v-menu__content 不起作用

Question

我有一個 v-autocomplete (vuetify)，可以擴充項目清單

當我單擊自動完成以鍵入項目列表中可用的內容時，項目所在的容器不在我想要的位置，如下圖所示（我使用了以下示例） vuetify 自己的菜單，因為它可以添加我遇到問題的系統的圖像）

透過選擇 devTools 的 .v-autocomplete__content.v-menu__content 類，我可以根據需要定位自動完成，例如透過在其上應用 margin-left 。

當我嘗試在範圍樣式內傳遞 v-autocomplete__content 類別時，我的問題開始發生，因為我只想在此頁面上新增此樣式。 我嘗試過使用 ::v-deep 甚至 >>> ，因為它已經在該頁面上的其他一些樣式中使用，但它不起作用。

下面也是使用 devTools 選擇的欄位的圖片，以便更好地理解。 我真正的問題只是嘗試在範圍內的樣式中使用樣式，是否有人有任何提示或其他替代方案來按照我想要的方式進行編輯？我正在使用 Vuejs。

歡迎任何幫助:)

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

我已經嘗試過使用 ::v-deep 和 >>> 模式，甚至在沒有 ::v-deep 的情況下傳遞 .v-autocomplete__content.v-menu__content 類別

Answer 1

如果您查看 DOM 中 v-autocomplete__content div 的位置，您會發現它附加到您的根 v-app 元件，而不是元件內部。若要變更此功能，Vuetify 為您提供了 attach 屬性，您可以在其中指定 v-autocomplete 將其自身附加到您想要的任何元素（例如您的元件根）。這將允許作用域樣式達到您的 v-autocomplete

<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>