Vuetify 3中如何为VToolbar设置30px自定义高度？

下面提供几种可行的方案，帮你覆盖Vuetify的默认样式：

方法1：组件属性+深度选择器（推荐） #

Vuetify的VToolbar支持height属性，但内部的v-toolbar__content默认的内边距和高度会抵消父组件的设置，需要同时调整子元素样式：

1. 给工具栏添加自定义类和高度属性：

<v-toolbar height="30" class="custom-small-toolbar">
  <!-- 你的工具栏内容 -->
</v-toolbar>

2. 根据Vue版本用深度选择器覆盖子元素样式：

/* Vue 2 语法 */
.custom-small-toolbar /deep/ .v-toolbar__content {
  height: 30px;
  padding: 0; /* 移除默认内边距，防止内容超出 */
  align-items: center; /* 保证内容垂直居中 */
}

/* Vue 3 语法 */
.custom-small-toolbar :deep(.v-toolbar__content) {
  height: 30px;
  padding: 0;
  align-items: center;
}

方法2：高优先级样式（快速验证） #

如果不想处理深度选择器，可直接用更高优先级的样式，临时用!important强制覆盖（不建议全局大量使用）：

<v-toolbar class="tiny-toolbar">
  <!-- 你的工具栏内容 -->
</v-toolbar>

.tiny-toolbar .v-toolbar__content {
  height: 30px !important;
  padding: 0 !important;
  min-height: unset !important; /* 覆盖默认最小高度限制 */
}

方法3：全局主题配置（进阶） #

如果需要全局统一使用小尺寸工具栏，可在Vuetify初始化时配置默认样式：

// Vuetify 配置文件（比如vuetify.js）
import { createVuetify } from 'vuetify'

export default createVuetify({
  defaults: {
    VToolbar: {
      height: 30,
    },
    '.v-toolbar__content': {
      height: '100%',
      padding: 0,
      align-items: center,
    },
  },
})

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