如何摆脱或覆盖 vuetify 的 v-textarea 底部边框？

Question

我正试图在不使用flat和solo的情况下去掉Vuetify在v-textarea中的默认下划线。这是我的代码：

<v-textarea
v-model="card.todo"
placeholder="New item"
class="text-area"
auto-grow
rows="1"
row-height="10"
@keyup="update_card"
></v-textarea>

这就是它的渲染方式：

<div class="v-input__slot"><div class="v-text-field__slot"><textarea id="input-105" placeholder="New item" rows="1" style="height: 84px;"></textarea></div></div>

我相信这与class＝"；v-input__slot"；因为当我删除那一行时，下划线就会消失。

Answer 1

试试这个：

.v-input.v-textarea>.v-input__control>.v-input__slot:before {
border: none;
}

请注意，这将清除所有v-textarea的边界，所以如果您不想要，请使用类或id！

Answer 2

将attr(变量="颜色填充"(添加到文本区域标签

<v-textarea variant='solo-filled'></v-textarea>

你可以在这里找到更多信息https://vuetifyjs.com/en/components/textareas/