web-dev-qa-db-fra.com

Comment changer la taille de la police dans le composant vuetify

J'utilise v-text-field et v-select avec vue-loader.
J'ai essayé de changer la taille de la police, mais je n'ai pas pu. Comment changer la taille de la police?

Mon code aime ça.

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

capture d'écran de l'outil développeur

javascriptcssvue.jsvuetify.js
8
tomlla

Définissez la famille de polices sur le corps. Si vous importez l'entrée de stylet Vuetify, main.styl écrase la variable $ font-family.

2
Nisal Edu

Pour modifier la taille de police d'un seul composant, tel qu'un text field, à l'échelle de l'application:

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

Pour modifier la taille de police dans un autre composant, utilisez un style de portée:

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

Pour une approche plus générique, vous pouvez également cibler plusieurs types de composants à l'aide de .v-input

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

ou

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

Enfin, vous pouvez également cibler les étiquettes.

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

ou vous pouvez créer une classe div et le signaler.

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

.element
      | 一共 : {{ sum("quantity") }} ，....
1
Raju yourPepe