Html Vuetify：根据（错误）消息的可见性调整输入字段的底部边距

在Vuetify 2.0中，如果

v-messages\uuuu包装器为空，输入字段（
v-input\uu control
）的底部边距是否可能更小

所以我需要更少的底边，就像这样：

<div class="v-input__control">
    <div class="v-input__slot">...</div>
    <div class="v-text-field__details">
        <div class="v-messages theme--light">
            <div class="v-messages__wrapper"></div>
        </div>
    </div>
</div>

<div class="v-input__control">
    <div class="v-input__slot">...</div>
    <div class="v-text-field__details">
        <div class="v-messages theme--light">
            <div class="v-messages__wrapper"><div class="v-messages__message">Mandatory field</div></div>
        </div>
    </div>
</div>


...

如果是这样的话，还有更多：

<div class="v-input__control">
    <div class="v-input__slot">...</div>
    <div class="v-text-field__details">
        <div class="v-messages theme--light">
            <div class="v-messages__wrapper"></div>
        </div>
    </div>
</div>

<div class="v-input__control">
    <div class="v-input__slot">...</div>
    <div class="v-text-field__details">
        <div class="v-messages theme--light">
            <div class="v-messages__wrapper"><div class="v-messages__message">Mandatory field</div></div>
        </div>
    </div>
</div>


...
必填字段

我一直在尝试使用
div.v-messages\uuu wrapper:empty
，但是我无法对这个div做太多的工作来减少底部边距。据我所知，减少边距的唯一方法是在
div.v-text-field\u details
上设置
display:none
或负边距，但这个类不知道没有内部内容

有什么方法可以实现这一点（最好是使用css）？
我也遇到过类似的情况

我注意到当出现错误消息时，
error--text
class被添加到输入div中。因此，我添加了一个样式：-

<style>

.error--text {
  margin-bottom: 10px !important;
}

</style>


.错误--文本{
边缘底部：10px！重要；
}

现在，每当出现错误时，就会应用
10 px的
margin bottom
，并修复我的问题