VueJS + NuxtJS + Vuetify - 未应用文本大小答案

【问题标题】：VueJS + NuxtJS + Vuetify - Text size not appliedVueJS + NuxtJS + Vuetify - 未应用文本大小
【发布时间】：2021-06-07 03:46:03
【问题描述】：

我有以下组件

<v-card v-for="item in items">
  .
  .
  <v-card-title class="text-button" v-text="item.category" />
  .
  .
</v-card>

但是"text-button" 类没有被应用。

根据vuetify 文档，有几个字体大小类，h1、h2 等，但它们都不起作用。但是添加 class="text-uppercase" 或 class="text-underline" 或任何其他类确实有效唯一不起作用的是字体大小类，这非常不方便，因为它们提供了设备大小的简写（@ 987654328@) 等。

如果有帮助，这是检查元素的样式

.v-card__title {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: 0.0125em;
    line-height: 2rem;
    word-break: break-all;
}

font-size 无论如何总是 1.25rem。如果我手动修改该值，则文本大小会发生变化。所以问题可能是这个1.25rem 值，我没有在任何地方设置它，我不知道它在哪里

【问题讨论】：

标签： vue.js nuxt.js vuetify.js

【解决方案1】：

我刚刚复制了v-card Vuetify 示例并将该类应用于v-card-title 没有问题Codepen。您使用的是哪个版本的 Vuetify？如果您使用的是 1.5.x，text-button 不存在并且文本类的应用方式不同，我无法告诉您它来自哪个 2.4.x 版本，但我认为这可能是问题所在。其他text-{values} 课程是否适合您，例如text-h1？

【讨论】：

npm install @nuxtjs/vuetify@next 会将 vuetify 更新到最新版本