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或不显示，但我无法从我的组件编辑它...有转到root风格的方式，但我不想这样做，我想学习或知道什么是我错过的问题。

期待某人的回复

Answer 1

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

使用CSS（同样工作与stylus，但您的IDE可能会抛出语法错误）：

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

或SCSS：

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

<小时/> 如果上述说法不起作用，请参阅this answer以获取解释和其他可能的解决方案。