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>

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

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

Answer 1

您可以创建自己的 class 并将其应用于包装标题的<b>标记：

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

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

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

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

!important修饰符是必需的

Answer 2

尽管@Dan 回答会起作用，但我建议不要在没有特殊需要的情况下使用!important规则。 您可以通过提供更“强大”的 CSS 选择器来实现相同的行为。 在您的情况下，最简单的方法是为该组件引入范围 styles 。

标题

<style scoped>
  .mytitle {
    font-size: 1.5rem;
  }
</style>