css - Vuetify .input-group__details 无法更改最小高度

Question

我不是 CSS 专家，但直到现在我还没有看到任何这样的“问题”。

所以，我正在使用 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>

现在我的问题是 .input-group__messages 类有一个最小高度，我希望它有 1px 或在这种情况下不显示，但我无法从我的组件中编辑它......有去根风格的方法，但我不想这样做我想学习或知道我错过了什么问题。

期待某人的回复

Answer 1

你需要vue-loader版本12.2+并使用 Deep selectors

使用 CSS(也 works 与 stylus 但您的 IDE 可能会引发语法错误):

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

或 SCSS:

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

---

见 this answer如果上述方法不起作用，请提供解释和其他可能的解决方案。