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

Question

我不是 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 或在这种情况下不显示，但我无法从我的组件...有进入根样式的方法，但我不想那样做，我想学习或知道有什么问题我错过了什么。

期待某人的回复

Answer 1

您需要 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;
}

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

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

Vuetify .input-group__details change min-height impossible

css

vuetify.js