cssvue.jsvuejs3vuetify.jsvuetifyjs3

How can I change all Vuetify's inputs opacity?

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.

Solution

  • Thanks to @yoduh insights I managed to find a solution that worked for me. My main goal was to get rid of the opacity without using any CSS, but only "Vuetify's power".

    The CSS rule which applies the opacity is this one

    .v-field--variant-filled .v-field__outline::before {
  ...
  opacity: var(--v-field-border-opacity);
}

    So I updated my settings.scss file

    @use 'vuetify/settings' with (
  $field-outline-opacity: 1
);

    And that's it, now the opacity is set to 1.

    Resources: