sass - Style one specific Vuetify scoped component using class names

Question

I need to add some scoped style to this Vuetify v-text-field component.

<v-col cols="5">
  <v-row no-gutters class="flex-nowrap">
    <v-col>
      <v-text-field
        v-model="textFilter"
        data-test-id="search-field"
        placeholder="'Search by account name'"
      >
        <template slot="append" class="searchButtons">
          <v-btn
           type="submit"
           data-test-id="search"
           @click="updateFilter"
           >
             Search
           </v-btn>
        </template>
      </v-text-field>
    </v-col>
  </v-row>
</v-col>

So I inspected the element, I found the Vuetify class name and scoped the style I need like this:

<style lang="scss" scoped>
  ::v-deep .v-text-field > .v-input__control > .v-input__slot {
    padding-left: 8px !important;
    padding-right: 0 !important;
  }
</style>

The problem is that I have a few other Vuetify components in the same scope that use the same class names, and of course they are also being affected by that style above.

I tried adding an additional class to my component (e.g. class="search-field"), and to use it in the style selector (e.g. ::v-deep .search-field > .v-text-field > .v-input__control > .v-input__slot ), but it doesn't work (I guess it's because these classes are not exposed but generated by Vuetify).

How can I select and style only that specific component?

Thanks

question from:https://stackoverflow.com/questions/65885388/style-one-specific-vuetify-scoped-component-using-class-names

Answer 1

Solved in the end, by adding an id to the highest node and then selecting like this:

TEMPLATE:

<v-text-field
   id="search-field"
   v-model="textFilter"
   data-test-id="search-field"
   placeholder="'Search by account name'"
 > ...

STYLE tag:

::v-deep #search-field > .v-text-field > .v-input__control > .v-input__slot {
  ...style
}