javascript - v-toolbar-title 中的字体大小未更新

Question

<style>
@import url("https://fonts.googleapis.com/css2?family=Creepster&display=swap");
#title {
  font-family: "Creepster", cursive;
  font-weight: 300;
  font-size: 1.5rem;
}
</style>

<template>
  <v-app>
    <v-app-bar color="#FFEE58" app>
      <v-app-bar-nav-icon>
        <v-img alt="Heart Logo" width="60" contains src="@/assets/logo.png"/>
      </v-app-bar-nav-icon>
      <v-spacer></v-spacer>

      <div id="title">
        <v-toolbar-title>
          <b>Title</b>
        </v-toolbar-title>
      </div>

      <v-spacer></v-spacer>

      <v-btn icon>
        <v-icon>mdi-heart</v-icon>
      </v-btn>

      <v-btn icon>
        <v-icon>mdi-magnify</v-icon>
      </v-btn>

      <v-menu left bottom>
        <template v-slot:activator="{ on, attrs }">
          <v-btn icon v-bind="attrs" v-on="on">
            <v-icon>mdi-dots-vertical</v-icon>
          </v-btn>
        </template>

        <v-list>
          <v-list-item v-for="n in 5" :key="n" @click="() => {}">
            <v-list-item-title>Option {{ n }}</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-menu>
    </v-app-bar>
    <v-main>
      <router-view/>
    </v-main>
  </v-app>
</template>

我试过在 h6 中包装 v-toolbar-title。然后在 #title 部分也添加 h6，但标题仍然没有改变大小。我还尝试过使用 px、% 和 rem 作为字体大小。

我假设应用程序工具栏内部可能存在大小限制，但无论我选择哪种大小，它仍然没有改变。

Answer 1

您可以创建自己的类并将其应用于 <b>标题包装标签:

<b class="mytitle">Title</b>

.mytitle {
  font-size: 1.5rem !important;
}

或者使用现有的工具栏标题类并将其应用于所有工具栏标题:

.v-toolbar__title {
  font-size: 1.5rem !important;
}

!important修饰符是必要的