遷移Vuetify 2到3：取代移除的樣式 .v-application / rounded / flat

Question

我正在嘗試從Vuetify/Vue 2升級到3。我不是前端開發人員，只是負責升級一些舊程式碼以保持功能正常。不幸的是，遷移指南似乎假設了一定的基本CSS知識，並沒有提供如何修復所有被刪除內容的範例。

我正在努力弄清楚如何遷移以下程式碼片段中的rounded和flat:

<v-select
        class="mr-2 filter-custom-input"
        slot="prepend-inner"
        v-model="field"
        :items="fields"
        menu-props="auto"
        label="Field"
        hide-details
        single-line
        density="compact"
        rounded
        flat
        theme="dark"
      />

以及這個程式碼片段中的.v-application（如果需要的話）：

<style lang="scss" scoped>
.v-application--is-ltr .v-list-item__icon:first-child,
.v-application--is-ltr .mr {
  margin-right: 10px;
}
</style>

不幸的是，遷移指南上對這些的唯一建議是：

• rounded屬性已移除。請將圓角的CSS類別套用於選單內容元素。例如：.rounded-te
• 以前包含為.v-application p或.v-application ul的全域樣式不再包含在內。如果您需要為p新增邊距，或為ul和ol新增左側內邊距，請在根組件的

Answer 1

你仍然可以使用 rounded 和 flat，它們只是移動到了底層的 VField 元件。

我認為你的 v2 select 最終會沒有任何框架，這種情況下 rounded 不會有任何可見效果。在 v3 中加入 variant="solo" 和 flat 以獲得相同的效果（請參閱 playground）

---

至於 v-application--is-ltr 類，它在 V3 中稱為 v-locale--is-ltr。

如果你仍然需要它取決於你的應用程序，這些都是自訂規則。檢查是否使用了自定義的mr 類，以及列表中第一個圖標的邊距是什麼樣的（我認為現在透過prepend slot 設定列表圖標，所以類應該是.v -list-item__prepend .v-icon）