How Do I change font-size in vuetify component
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;
}
You could create a folder called sass, scss or styles in your src directory with a file named variables.scss or variables.sass. And add scss variable $input-font-size: 12px to the variables file. The vuetify-loader will automatically bootstrap your variables into Vue CLI's compilation process, overwriting the framework defaults.
$font-size-root: 14px;
$input-font-size: 14px;
Here you could find details.
Here you could find an example of the variables file.