如何修改Vuetify v-text-field组件的背景颜色？

针对你使用variant="outlined"的v-text-field无法设置白色背景的问题，这里提供几种可行的解决方案：

方法一：使用CSS变量直接设置（最简单） #

Vuetify的字段组件支持通过CSS变量--v-field-background控制背景色，直接在组件上绑定样式即可：

<v-text-field
    v-model="email"
    color="primary"
    label="E-Mail"
    variant="outlined"
    style="--v-field-background: #ffffff;"
>
</v-text-field>

这种方式无需额外写CSS规则，直接生效。

方法二：通过深度选择器自定义样式（适合批量修改） #

如果需要给多个输入框统一设置白色背景，可以在单文件组件的<style scoped>中添加以下样式：

:deep(.v-field--outlined .v-field__input) {
  background-color: white;
  /* 可选：添加圆角适配outlined样式 */
  border-radius: 4px;
}

:deep()（Vue2中可使用::v-deep）用于穿透scoped样式，确保能选中Vuetify内部的组件元素。

方法三：添加自定义类名单独控制 #

给目标输入框添加自定义类名，再编写对应样式：

<v-text-field
    v-model="email"
    color="primary"
    label="E-Mail"
    variant="outlined"
    class="white-bg-input"
>
</v-text-field>

然后在样式中设置：

.white-bg-input .v-field__input {
  background-color: white;
}

如果是scoped样式，同样需要加上:deep()前缀。

说明 #

variant="outlined"的输入框默认背景为透明，这是Vuetify的预设样式。以上方法都是直接针对输入区域的背景元素进行修改，不会影响color="primary"控制的聚焦边框颜色。

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