修改Vuetify字段默认Sass变量后v-textarea无法自动增高的问题

通过覆盖Vuetify默认Sass变量修改了应用中所有字段的默认高度，但v-textarea开启auto-grow后，内容超过一行时无法自动增高，高度始终保持不变。排查后确认问题由$field-input-min-height变量导致，希望在不破坏v-textarea自动增高功能的前提下，完成字段默认高度的修改。

覆盖的Sass变量如下：

$field-control-height: 30px,
$input-control-height: 30px,
$field-input-min-height: 30px,
$field-input-padding-top: 4px,
$field-input-padding-bottom: 4px,
$field-control-underlined-height: 30px,

全局使用的v-textarea组件代码：

<template>
    <v-textarea
        v-bind="$attrs"
        :clearable="clearable"
        :readonly="readonly"
        :class="disableMessage ? 'disable-message' : ''"
        density="compact"
        variant="outlined"
        :bg-color="`rgb(var(--v-theme-field))`"
        :color="`rgb(var(--v-theme-primary))`"
        clear-icon="mdi-close"
        auto-grow
        rows="1"
        :type="type"
    />
</template>

<script setup lang="ts">
defineProps({
    clearable: {
        type: Boolean,
        default: false,
    },
    disableMessage: {
        type: Boolean,
        default: false,
    },
    readonly: {
        type: Boolean,
        default: false,
    },
    type: {
        type: String,
        default: "text",
    },
});
</script>

<style scoped>
.v-textarea {
    color: rgb(var(--v-theme-text)) !important;
}

.disable-message .v-input__details {
    display: none;
}
</style>

问题根源是$field-input-min-height被固定为30px后，限制了v-textarea的高度扩展。以下两种方案可解决问题：

方案1：单独解除v-textarea的最小高度限制 #

保留其他输入字段的30px高度设置，仅针对v-textarea覆盖最小高度：

// 全局Sass变量保持原有设置
$field-control-height: 30px;
$input-control-height: 30px;
$field-input-padding-top: 4px;
$field-input-padding-bottom: 4px;
$field-control-underlined-height: 30px;

// 单独为v-textarea取消最小高度限制
.v-textarea {
  --v-field-input-min-height: unset;
  min-height: unset;
}

此方案让普通输入框维持30px高度，v-textarea的auto-grow功能正常生效。

方案2：使用文本域专属变量区分设置 #

Vuetify提供了$textarea-min-height变量专门控制文本域的最小高度，可替代全局的$field-input-min-height，避免冲突：

$field-control-height: 30px;
$input-control-height: 30px;
// 仅给普通输入框设置固定最小高度
$field-input-min-height: 30px;
// 文本域最小高度设为auto，不限制自动增高
$textarea-min-height: auto;
$field-input-padding-top: 4px;
$field-input-padding-bottom: 4px;
$field-control-underlined-height: 30px;

这种方式更贴合Vuetify的变量设计逻辑，从根源避免全局变量对文本域功能的影响。

额外注意事项 #

• 你的v-textarea已设置rows="1"，配合auto-grow可正常触发高度变化，无需修改该属性。
• 避免用!important强制固定v-textarea的高度，会干扰组件内部的高度计算逻辑。

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