title: Style one specific Vuetify scoped component using class names
body: <p>I need to add some scoped style to this Vuetify <code>v-text-field</code> component.</p>
  <pre><code>&lt;v-col cols=&quot;5&quot;&gt;
    &lt;v-row no-gutters class=&quot;flex-nowrap&quot;&gt;
      &lt;v-col&gt;
        &lt;v-text-field
          v-model=&quot;textFilter&quot;
          data-test-id=&quot;search-field&quot;
          placeholder=&quot;'Search by account name'&quot;
        &gt;
          &lt;template slot=&quot;append&quot; class=&quot;searchButtons&quot;&gt;
            &lt;v-btn
             type=&quot;submit&quot;
             data-test-id=&quot;search&quot;
             @click=&quot;updateFilter&quot;
             &gt;
               Search
             &lt;/v-btn&gt;
          &lt;/template&gt;
        &lt;/v-text-field&gt;
      &lt;/v-col&gt;
    &lt;/v-row&gt;
  &lt;/v-col&gt;
  </code></pre>
  <p>So I inspected the element, I found the Vuetify class name and scoped the style I need like this:</p>
  <pre><code>&lt;style lang=&quot;scss&quot; scoped&gt;
    ::v-deep .v-text-field &gt; .v-input__control &gt; .v-input__slot {
      padding-left: 8px !important;
      padding-right: 0 !important;
    }
  &lt;/style&gt;
  </code></pre>
  <p>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.</p>
  <p>I tried adding an additional class to my component (e.g. <code>class=&quot;search-field&quot;</code>), and to use it in the style selector (e.g. <code>::v-deep .search-field &gt; .v-text-field &gt; .v-input__control &gt; .v-input__slot </code>), but it doesn't work (I guess it's because these classes are not exposed but generated by Vuetify).</p>
  <p>How can I select and style only that specific component?</p>
  <p>Thanks</p>