如何调整Vuetify v-app-bar的厚度使其更薄？

方案一：内置属性+极简样式修复 #

直接给v-app-bar设置目标高度，同时修正内部内容容器的布局，就能让内容自动垂直居中：

<template>
  <v-app theme="dark">
    <v-app-bar height="48px" class="custom-thin-bar">
      <v-btn to="one" size="small">One</v-btn>
      <v-btn to="two" size="small">Two</v-btn>
      <v-switch label="toggle" size="small"></v-switch>
    </v-app-bar>
  </v-app>
</template>

<style scoped>
.custom-thin-bar .v-toolbar__content {
  height: 100% !important; /* 覆盖默认64px，继承导航栏高度 */
  align-items: center;
}
</style>

• height="48px"直接定义导航栏的目标高度（可根据需求修改数值）
• 给内部的v-toolbar__content设置height:100%，让它填满导航栏空间，再通过align-items:center强制内容垂直居中
• 给按钮和开关加size="small"，适配窄导航栏，避免内容拥挤溢出

方案二：全自定义样式控制 #

如果需要更精细的布局调整，比如修改内边距、元素间距，可以直接覆盖默认样式：

<template>
  <v-app theme="dark">
    <v-app-bar class="super-thin-bar">
      <v-btn to="one">One</v-btn>
      <v-btn to="two">Two</v-btn>
      <v-switch label="toggle"></v-switch>
    </v-app-bar>
  </v-app>
</template>

<style scoped>
.super-thin-bar {
  height: 40px; /* 自定义高度 */
}

.super-thin-bar .v-toolbar__content {
  height: 40px !important; /* 强制覆盖默认64px */
  align-items: center;
  padding: 0 12px; /* 调整左右内边距 */
}

/* 可选：调整子元素间距 */
.super-thin-bar .v-btn,
.super-thin-bar .v-switch {
  margin: 0 6px;
}
</style>

你之前的问题出在哪？ #

你先设置height="1px"再用样式覆盖成48px，这种矛盾的设置会打乱Vuetify内部的布局逻辑，导致v-toolbar__content没有正确继承导航栏高度。另外，没有显式设置align-items:center，内容会停留在原来的垂直位置，自然就不对齐了。

内容的提问来源于stack exchange，提问作者jrefior