How can I change all Vuetify's inputs opacity?

Question

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.

Answer 1

Ideally, Vuetify exposes anything you would want to change or customize via the component's API. However, in this case, setting the v-text-field border-opacity is not exposed by the API, but the good news is that most anything CSS related can be customized as long as you know what to select.

To select the internal element of a component, you'll need to use a deep selector

<style scoped>
  .v-text-field :deep(.v-field__outline) {
    --v-field-border-opacity: 1;
  }
</style>

Vuetify Playground example

You can avoid a deep selector if the style change is meant to be global (non-scoped).

<style>
  /* app wide style */
  .v-field__outline {
    --v-field-border-opacity: 1;
  }
</style>