I created following component

<v-text-field
  style="opacity: 1 !important"
  class="foo"
  base-color="primary"
></v-text-field>

And I noticed that its opacity didn’t change. I opened the inspector and I found out that it’s rendered like this:

<div class="v-input foo ..."> <!-- fallthrough attrs are applied here -->
  <div class="v-input__control">
    <div class="v-field ...">
      <div class="v-field__overlay">...</div>
      <div class="v-field__loader">...</div>
      <div class="v-field__field">...</div>
      <div class="v-field__outline ...">...</div>
    </div>
  </div>
</div>

v-field__outline class looks like this

.v-field__outline {
  --v-field-border-opacity: 0.38;
  ...
}

I need to change this opacity. How can I do it? Possibly in a clean way.