如何更改 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>

developer tool screenshot

Answer 1

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

Answer 2

或者您可以创建一个 div class 并指出这一点。

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

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

Answer 3

要更改单个组件的字体大小，例如 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 4

使用 VueJS deep selector 对我有用：

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

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

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

Here 你可以找到详细信息。

Here 您可以找到变量文件的示例。

Answer 6

使用星号选择器 * 匹配元素或组件的所有后代，然后应用如下字体大小：

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

然后

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

希望这有效。

Answer 7

我不确定 sass 的用途，但是对于 vuetify 中的 scss，你必须使用 ::v-deep 选择器而不是 >>>:

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

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

How Do I change font-size in vuetify component

javascript

css

vue.js

vuetify.js