Vuetify 3：如何缩小App Bar中按钮的点击区域？

针对你在App Bar中使用v-btn text变体时，想去除文本周围空白、仅保留文本区域可点击的需求，给你几个直接可行的方案：

方案1：内联样式直接覆盖 #

直接在按钮上添加内联样式，强制重置padding和最小宽高：

<v-btn @click="" color="blue" text style="padding: 0; min-height: auto; min-width: auto;">How it works</v-btn>

方案2：自定义CSS类（推荐） #

如果需要复用样式，在全局样式或组件的<style>标签中定义自定义类：

.custom-text-btn {
  padding: 0 !important;
  min-height: auto !important;
  min-width: auto !important;
}

然后给按钮添加该类：

<v-btn @click="" color="blue" text class="custom-text-btn">How it works</v-btn>

方案3：Scoped样式下的深度选择器 #

如果你的组件使用了scoped样式，需要用深度选择器来穿透Vuetify的默认样式：

<style scoped>
:deep(.v-btn.text) {
  padding: 0;
  min-height: auto;
  min-width: auto;
}
</style>

关于修改SASS变量无效的说明 #

Vuetify中text按钮的内边距、最小宽高等样式并非由单一SASS变量控制，且变量覆盖需要严格遵循「先定义变量，再导入Vuetify样式」的顺序，所以直接用自定义CSS覆盖会更高效直接。

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