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

您需要12.2+vue-loader版本并使用Deep选择器

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

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

或者SCSS:

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

如果上述说法不起作用, 请参阅此答案以获得解释和其他可能的解决方案.