'How Do I change font-size in vuetify component

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

javascriptcssvue.jsvuetify.js


Solution 1:[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;
}

Solution 2:[2]

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.

Solution 3:[3]

Using VueJS deep selector worked for me:

<style lang="css" scoped>

.v-text-field >>> input {
    font-size: 0.8em;
    font-weight: 100;
    text-transform: capitalize;
}
.v-text-field >>> label {
    font-size: 0.8em;
}
.v-text-field >>> button {
    font-size: 0.8em;
}

</style>

Solution 4:[4]

or you can create a div class and point this out. 

<style lang="stylus" scoped>
  .element
    color white    
    padding 0
    margin 0
    font-size 150%
</style>

.element
      | ?? : {{ sum("quantity") }} ?....

Solution 5:[5]

I'am not sure what to use with sass, but for scss in vuetify you have to use the ::v-deep selector instead of >>>:

<style lang="scss" scoped>

.v-text-field ::v-deep input {
    font-size: 0.8em;
    font-weight: 100;
    text-transform: capitalize;
}

.v-text-field ::v-deep label {
    font-size: 0.8em;
}

.v-text-field ::v-deep button {
    font-size: 0.8em;
}
</style>

Solution 6:[6]

Use an asterisk selector * to match all descendants of an element or a component and then apply the font size like following:

.font-class-name * {
   font-size: 14px;
}

Then

<v-text-field class="font-class-name"></v-text-field>

Hope this works.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Steven Spungin
Solution 2 Anastassiya Grinvald
Solution 3
Solution 4 Raju yourPepe
Solution 5 milchreis
Solution 6 Babaktrad

Related Questions