如何在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>

开发人员工具屏幕截图

Answer 1

要更改单个组件（例如在整个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;
}

Answer 2

使用 VueJS深度选择器对我有用：

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

Answer 3

您可以使用名为 variables.scss 或 variables.sass 的文件在 src 目录中创建一个名为 sass、scss 或 style 的文件夹。并将 scss 变量 $input-font-size: 12px 添加到变量文件中。vuetify-loader 会自动将你的变量引导到 Vue CLI 的编译过程中，覆盖框架默认值。

$font-size-root: 14px;
$input-font-size: 14px;

在这里你可以找到详细信息。

在这里您可以找到变量文件的示例。

Answer 4

在正文上设置字体系列。如果您要导入 Vuetify 手写笔条目，则 main.styl 会覆盖 $font-family 变量。