Vuetify：如何移除v-menu列表中的垂直间距？

我创建了一个包含若干按钮的v-menu组件（后续将添加更多内容），该组件运行正常，但列表条目之间存在大量冗余间距。由于列表较长，我希望移除这些间距：

当前使用的代码：

<v-menu activator="#route-menu-activator" :close-on-content-click='false' title="Click to show route, double-click to select">
     <v-list density="compact">
        <v-list-item density="compact" v-for="(item, i) in Routes.list()" :key="i"  :value="i" >
          <v-btn variant='outlined' density="compact"  @click="viewRoute($event,i)">
             <span class="text-truncate" style="max-width:200px" >{{ DestinationString(item.dest) }}</span>
          </v-btn>
       </v-list-item>
     </v-list>
 </v-menu>

已尝试density='compact'属性，虽有一定效果但未达预期；给v-list-item和按钮添加class="ma-0 pa-0"也无效。

解决方案 #

1. 覆盖v-list-item的默认样式 #

Vuetify的v-list-item自带默认内边距、外边距和最小高度，即使设置density="compact"仍会残留间距，需通过自定义CSS强制覆盖：

<v-list-item 
  density="compact" 
  v-for="(item, i) in Routes.list()" 
  :key="i"  
  :value="i"
  class="custom-list-item"
>

添加对应样式：

.custom-list-item {
  padding: 0 !important;
  margin: 0 !important;
  min-height: unset !important; /* 移除默认最小高度限制 */
}

2. 优化按钮的间距与布局 #

按钮本身的默认间距也会影响整体效果，添加block属性让按钮占满列表项宽度，同时手动设置合适的内边距避免内容拥挤：

<v-btn 
  variant='outlined' 
  density="compact"  
  @click="viewRoute($event,i)"
  class="ma-0 pa-2"
  block
>

3. 移除v-list的容器内边距 #

给v-list添加pa-0类，清除列表容器的默认内边距：

<v-list density="compact" class="pa-0">

最终优化代码 #

<v-menu activator="#route-menu-activator" :close-on-content-click='false' title="Click to show route, double-click to select">
     <v-list density="compact" class="pa-0">
        <v-list-item 
          density="compact" 
          v-for="(item, i) in Routes.list()" 
          :key="i"  
          :value="i"
          class="custom-list-item"
        >
          <v-btn 
            variant='outlined' 
            density="compact"  
            @click="viewRoute($event,i)"
            class="ma-0 pa-2"
            block
          >
             <span class="text-truncate" style="max-width:200px" >{{ DestinationString(item.dest) }}</span>
          </v-btn>
       </v-list-item>
     </v-list>
 </v-menu>

<style scoped>
.custom-list-item {
  padding: 0 !important;
  margin: 0 !important;
  min-height: unset !important;
}
</style>

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