如何移除Vuetify下划线样式v-text-field的下划线？

方案一：直接更换组件变体（最简便） #

Vuetify的v-text-field自带plain变体，本身就是无边框无下划线的空白输入框，完全适配你的需求，直接替换variant属性即可：

<v-text-field 
  label="Label" 
  clearable 
  variant="plain" 
  density="compact" 
  hide-details="auto" 
  color="primary"
/>

这个变体默认无任何边框和下划线，输入框背景透明，能完美融入表格单元格场景。

方案二：强制覆盖下划线样式（保留原变体） #

如果必须保留underlined变体，可通过深度选择器穿透Vuetify的组件样式，移除下划线相关的伪元素样式。在组件的scoped样式中添加以下代码：

/* 移除默认状态的下划线 */
:deep(.v-text-field--underlined .v-input__control .v-input__slot::after) {
  border-bottom: none !important;
}

/* 移除聚焦状态的下划线 */
:deep(.v-text-field--underlined.v-input--is-focused .v-input__control .v-input__slot::after) {
  border-bottom: none !important;
}

/* 移除悬浮状态的下划线 */
:deep(.v-text-field--underlined.v-input--is-hovered .v-input__control .v-input__slot::after) {
  border-bottom: none !important;
}

/* 确保输入框背景透明，和表格单元格融合 */
:deep(.v-text-field--underlined .v-input__control .v-input__slot) {
  background-color: transparent;
}

之前的CSS无效是因为Vuetify的下划线是通过v-input__slot的::after伪元素生成的，普通选择器无法穿透scoped样式选中这个内部元素，必须使用:deep()（Vue 3）或::v-deep（Vue 2）深度选择器。

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