以定制的Vuetify文本字段為例

(游樂場)

<template>
  <v-app>
    <v-container>
      <v-text-field
        label="label goes here"
        variant="plain"
        density="compact"
        hide-details="auto"
        color="primary"
        class="my-1"
        model-value="some text goes here"
      />
    </v-container>
  </v-app>
</template>

<style scoped>
  :deep(.v-input),
  :deep(.v-field),
  :deep(.v-label--clickable) {
    font-size: 12px;
  }

  :deep(.v-label.v-field-label) {
    font-size: 10px;
  }
</style>

標簽和內容之間的垂直間距太大

降低空間最好的方法是什么？我試著補充

.v-input {
    height: 4px;
    min-height: 4px;
    max-height: 4px;
  }

  .v-field {
    height: 4px;
    min-height: 4px;
    max-height: 4px;
  }

  .v-text-field {
    height: 4px;
    min-height: 4px;
    max-height: 4px;
  }

看看會發(fā)生什么，但什么都沒有改變。