Estoy usando una biblioteca llamada vue-select y, como de costumbre, debe importar su archivo CSS a App.vue como una importación global.

Luego lo sobrescribo con SCSS de alcance. a continuación se genera el código HTML y CSS.

 <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>

Observe que el atributo data-v-2059d297 solo se aplica a v-select div no dentro de 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 generado a través de este código es:

El data-v-2059d297 se agrega junto a vs__dropdown-menu , que no existe.

Necesito reutilizar este v-select pero con un CSS diferente.

¿Alguna solución sobre cómo superar esto?