Vuetify 3.7.1中VNumberInput高度无法降至32px的问题

Vuetify的VNumberInput组件默认内置了最小高度限制，需要穿透组件的scoped样式覆盖核心元素的默认属性，以下是具体解决步骤：

1. 给组件添加自定义类并编写穿透样式 #

在Vue单文件组件中，使用:deep()（Vue 2可使用::v-deep）修改Vuetify内置的组件样式：

模板代码 #

<v-number-input
  class="custom-height-number-input"
  v-model="yourValue"
  min="0"
  max="100"
></v-number-input>

样式代码（scoped模式） #

<style scoped>
/* 覆盖输入框容器的最小高度和高度，同步调整行高让内容居中 */
.custom-height-number-input :deep(.v-field) {
  min-height: 32px;
  height: 32px;
  line-height: 32px;
  padding: 0 8px; /* 根据布局需求调整内边距 */
}

/* 确保输入控制区域同步适配高度 */
.custom-height-number-input :deep(.v-input__control) {
  min-height: 32px;
}

/* 调整增减按钮的尺寸和位置，避免错位 */
.custom-height-number-input :deep(.v-number-input__spin-button) {
  width: 24px;
  height: 16px; /* 总高度32px，上下按钮各占一半 */
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-height-number-input :deep(.v-number-input__spin-button--up) {
  top: 0;
}

.custom-height-number-input :deep(.v-number-input__spin-button--down) {
  bottom: 0;
}
</style>

2. 关键说明 #

• 必须使用深度选择器：Vuetify组件样式是scoped的，外部样式无法直接覆盖，:deep()可突破这一限制
• 同步调整关联元素：仅修改输入框容器高度会导致内容不居中、按钮错位，需同步调整输入控制区域和增减按钮的属性
• 验证样式生效：修改后打开浏览器开发者工具，检查.v-field等元素的min-height和height是否已被设置为32px（默认样式会被划掉）

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