Writing Scoped SCSS for an external vue.js Library

I am using a library called vue-select and as usual, you need to import its CSS file to App.vue as a global import.

Then I overwrite it with scoped SCSS. below is HTML and CSS code being generated.

<v-select :options="array" v-model="selectedItem" class="mx-5"></v-select>

 // below is Generated HTML markup

<div data-v-2059d297="" dir="auto" class="v-select mx-5 vs--single vs--searchable">
 <div id="vs1__combobox" role="combobox" aria-expanded="false" aria-owns="vs1__listbox" aria-label="Search for option" class="vs__dropdown-toggle">
  <div class="vs__selected-options"> 
   <input aria-autocomplete="list" aria-labelledby="vs1__combobox" aria-controls="vs1__listbox" type="search" autocomplete="off" class="vs__search">
  </div>
 </div>
</div>

Notice data-v-2059d297 attribute only gets applied to v-select div not inside divs.

.v-select {
  margin-top: 30px;

  .vs__dropdown-toggle {
    border: none;
    border-bottom: 2px solid #707070;
    border-radius: 0;
  }
  .vs__dropdown-menu {
    max-height: 200px;
  }
 }

CSS generated through this code is:

The data-v-2059d297 is getting added next to vs__dropdown-menu, which does not exist.

I need to reuse this v-select but with a different CSS.

Any solutions on how to overcome this?

Solution 1:

Try with ::v-deep like this

::v-deep .v-select {
  margin-top: 30px;

  .vs__dropdown-toggle {
    border: none;
    border-bottom: 2px solid #707070;
    border-radius: 0;
  }
  .vs__dropdown-menu {
    max-height: 200px;
  }
 }