如何在 vuetify 中更改“v-text-field”的字体大小？

Question

我正在使用“Nuxt”应用程序并使用“Vuetify”作为我的框架。这是我的一个组件的代码：

<template>

<v-text-field
  color="var(--color4)"
  class="px-15"
>

  <template v-slot:label>

      <span class="labelClass">
          please enter your name
      </span>

  </template>

</v-text-field>

</template>

<style scoped>
.labelClass {
  font-size: 1.2rem;
}
</style>

我想增加输入中标签的字体大小。根据Vuetify ducomentation，我们必须使用“插槽”来做到这一点。所以我添加了一个新模板和“插槽”。然后我使用 labelClass 作为其中的 span 来控制字体大小。字体大小发生了变化，但这里的问题是，如果我增加字体大小（例如增加到 1.8rem），那部分文本就会消失：

如果字体大小增加，情况会变得更糟。我也阅读了this question，但它对我没有帮助。我还尝试为 v-text-field 和诸如 v-text-field__slot 之类的一些类设置“高度”属性，但它们对我不起作用。

Answer 1

问题是，在渲染input 后得到这个css 样式：

.v-input input {
    max-height: 32px;
}

要解决这个问题，您只需要覆盖它。如果您不想为每个 input 覆盖它，只需向您的 v-text-field 添加另一个类：

<v-text-field
  color="var(--color4)"
  class="px-15 my-class"
>

...然后像这样使用它：

.v-input.my-class input {
    max-height: 32px;
}

---

编辑：看起来您还需要覆盖以下样式：

.v-input .v-label {
    height: 20px;
    line-height: 20px;
    letter-spacing: normal;
}

这是标签的样式，需要增加height和line-height。需要在以下位置完成另一个覆盖：

.v-text-field input {
    flex: 1 1 auto;
    line-height: 30px;
    padding: 8px 0 8px;
    max-width: 100%;
    min-width: 0;
    width: 100%;
}

line-height 需要增加。

由于你的html 在你的slot 中只显示在slot、line-height 和max-width 从父母影响可见空间。