如何更改 vuetify 组件中的字体大小

Question

我将 v-text-field 和 v-select 与 vue-loader 一起使用。

我试图改变字体大小，但我不能。如何更改字体大小？

我的代码喜欢这个。

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

开发者工具截图

原文由 tomlla 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在 body 上设置字体系列。如果要导入 Vuetify stylus 条目，main.styl 会覆盖 $font-family 变量。

原文由 Nisal Edu 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

要更改单个组件的字体大小，例如 text field ，应用程序范围：

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

要更改另一个组件中的字体大小，请使用范围样式：

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

对于更通用的方法，您还可以使用 .v-input 定位多种组件类型

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

或者

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

最后，您还可以定位标签。

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

原文由 Steven Spungin 发布，翻译遵循 CC BY-SA 4.0 许可协议