如何在Vuetify 3中设置v-text-field的高度？

Vuetify 3 里的 v-text-field、v-autocomplete、v-checkbox 这类组件确实没有直接的 height 属性，只能通过内置的 density（可选值：default/comfortable/compact）调整高度。如果要自定义高度，可以通过以下几种精准定位CSS类的方式实现：

1. 单个组件内联样式快速调整 #

直接给组件加 style 属性，同时覆盖Vuetify内置的CSS变量，避免内容错位：

<v-text-field
  label="自定义高度输入框"
  style="height: 60px; --v-input-height: 60px;"
></v-text-field>

--v-input-height 是框架内置变量，用来统一控制输入框内部元素的布局基准，确保文字、图标等元素垂直对齐。

2. 批量组件自定义类调整 #

给目标组件添加自定义类名，再通过Vue的深度选择器（:deep()）定位核心容器类：

<template>
  <v-text-field class="custom-height-input" label="批量自定义高度"></v-text-field>
  <v-autocomplete class="custom-height-input" label="下拉选择框"></v-autocomplete>
</template>

<style scoped>
/* 控制组件外层容器高度 */
:deep(.custom-height-input .v-field) {
  height: 50px;
}
/* 确保内部输入区域垂直居中 */
:deep(.custom-height-input .v-field__input) {
  align-items: center;
}
</style>

核心定位类是 .v-field——它是所有输入类组件的外层容器，直接决定组件整体高度；.v-field__input 负责内部输入内容的布局对齐。

3. Checkbox组件的特殊调整 #

v-checkbox 结构不同，需要定位复选框容器和标签元素：

<template>
  <v-checkbox class="custom-checkbox" label="自定义高度复选框"></v-checkbox>
</template>

<style scoped>
:deep(.custom-checkbox .v-checkbox__wrapper) {
  height: 40px;
  width: 40px;
}
/* 让标签文字和复选框垂直对齐 */
:deep(.custom-checkbox .v-label) {
  line-height: 40px;
}
</style>

实用技巧 #

• 不用死记类名：打开浏览器开发者工具（F12），用元素选择器点击组件，直接查看DOM结构里的类名，精准定位要修改的元素。
• 避免全局污染：优先用自定义类+深度选择器，不要直接修改Vuetify默认类，防止影响其他未做定制的组件。

内容的提问来源于stack exchange，提问作者Sleepy J