How Do I change font-size in vuetify component

Question

I use v-text-field, and v-select, with vue-loader.
I tried to change font-size, but I could not. How Do I change font-size?

My code likes this.

<template lang="pug">
p label-1
v-text-field(...)

p label-1
v-text-field(...)
</template>

<stylelang="sass">
.input-group .input-group__input
  font-size: 12px !important
</style>

<stylelang="sass"scoped>
.p
  font-size: 12px
</style>

developer tool screenshot

Answer 1

To change the font size for a single component, such as a text field, application-wide:

<style>
  .v-text-field input {
    font-size: 1.2em;
  }
</style>

To change the font size within another component, use a scoped style:

<style scoped>
  .v-text-field input {
    font-size: 1.2em;
  }
</style>

For a more generic approach, you can also target multiple component types using .v-input

.v-input {
    font-size: 1.2em;
}

or

.v-input input {
    font-size: 1.2em;
}

Finally, you can also target the labels as well.

.v-input .v-label {
    font-size: 1.2em;
}