Vuetify 3中如何正确设置v-select组件的高度？

Vuetify 2里设置v-select高度很直接，用height属性就行：

<v-select :items="..." height="30" />

但Vuetify 3移除了这个属性，手动给多个组件类加height的方式确实麻烦，这里分享几个更优雅的解决方法：

1. 使用自定义CSS类批量覆盖 #

写一个自定义类，一次性定位v-select的核心高度相关元素，避免逐个调整：

/* 全局或局部样式中添加 */
.custom-small-select .v-field,
.custom-small-select .v-select__selections,
.custom-small-select .v-input__control {
  height: 30px;
}

然后在组件中引用：

<v-select :items="yourItemsArray" class="custom-small-select" />

这种方式适合需要统一调整多个v-select高度的场景，一次定义多处复用。

2. 利用Vuetify内置CSS变量（推荐） #

Vuetify 3提供了组件专属的CSS变量，直接修改变量就能同步调整相关元素的高度，不需要硬编码类名：

/* 全局生效 */
:root {
  --v-select-height: 30px;
}

/* 仅针对单个组件生效 */
.custom-small-select {
  --v-select-height: 30px;
}

组件使用时只需要加对应的类：

<v-select :items="yourItemsArray" class="custom-small-select" />

这种方式完全贴合Vuetify的设计系统，后续框架版本更新时兼容性更好，是最优解。

3. 插槽自定义内容（高度定制场景） #

如果需要单独控制选中项或下拉选项的高度，可以通过插槽重写内容：

<v-select :items="yourItemsArray">
  <!-- 自定义选中项的高度 -->
  <template v-slot:selection="{ item }">
    <div style="height: 30px; display: flex; align-items: center;">
      {{ item }}
    </div>
  </template>
  <!-- 自定义下拉选项的高度 -->
  <template v-slot:item="{ item }">
    <div style="height: 30px; display: flex; align-items: center; padding: 0 16px;">
      {{ item }}
    </div>
  </template>
</v-select>

这种方式灵活性拉满，适合对组件外观有特殊需求的场景。

内容的提问来源于stack exchange，提问作者Korzan Adrian