Vuetify .input-group__details 不可能改变最小高度

Vuetify .input-group__details change min-height impossible

我不是 CSS 专家,但直到现在我还没有见过这样的 "problem"。

所以,我正在使用 Vuetify 并为我的搜索表单添加了一个..

现在该组件正在创建:

<div input-group input-group--prepend-icon input-group--text-field primary--text>
  <label for="search"></label>
  <div class="input-group__input"></div>
  <div class="input-group__details"></div>
  <div class="input-group__messages"></div>
</div>

现在我的问题是 class .input-group__messages 有一个最小高度,我希望它有 1px 或在这种情况下不显示,但我无法从我的组件...有进入根样式的方法,但我不想那样做,我想学习或知道有什么问题我错过了什么。

期待某人的回复

您需要 vue-loader 版本 12.2+ and use Deep selectors

使用 CSS(stylus 一起工作 但你的 IDE 可能会抛出语法错误:

>>> .input-group__messages {
    min-height: 1px;
}

或SCSS:

/deep/ .input-group__messages {
    min-height: 1px;
}


请参阅 了解解释,如果上述方法不起作用,请参阅其他可能的解决方案。