Vuetify .input-group__details change min-height impossible

Question

I'm not an CSS Expert but until now I've not seen any "problem" like this.

So, I am using Vuetify and I added a for my search form..

Now that component is creating:

<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>

Now my problem is that class .input-group__messages has a min-height and I want it to have 1px or not show at this case, but I can't manage to edit that from my component... there is the way to go to root style but I don't want to do that I want to learn or to know what's the problem what am I missing.

Looking forward for a reply from someone

Answer 1

You need vue-loader version 12.2+ and use Deep selectors

Using CSS (also works with stylus but your IDE might throw syntax errors):

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

Or SCSS:

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

---

See this answer for explanations, and other possible solutions if the above did not work.