Change font-size in v-select component

Question

I have v-select component

<v-select 
    class="mt-2 mb-2" 
    density="compact" 
    hide-details
    v-model="item.model"
    :items="items"
></v-select>

and i need to change font-size.
I know that it inherits font-size from v-field

But this doesnt work

.v-field {
  font-size: 0.8rem !important;
}  

What am i doing wrong?

Answer 1

So the problem was in scoped css.

I just added

<style lang="scss">
  .v-field, .v-list-item-title  {
  font-size: 0.875rem !important;
}
</style>

and it works fine.

Or i can do this

<style scoped lang="scss">
  :deep(.v-field){
  font-size: 0.875rem !important;
}
</style>

and it works while scoped as well.