如何移除Vuetify中v-list-item的多余间距

你遇到的问题是Vuetify渲染v-list-item时自动生成的32px间距元素，常规scoped样式无法生效——这是因为scoped样式会被限制在当前组件内，没法穿透到Vuetify的子组件元素上。给你几个可行的解决方法：

• 使用深度选择器突破scoped限制
  Vue允许用:deep()（Vue3）或::v-deep（Vue2）穿透scoped样式，直接修改Vuetify子组件的元素样式：

  <style scoped>
  :deep(.v-list-item__spacer) {
    width: 0 !important;
  }
  :deep(.v-list-item__prepend) {
    margin-right: 0 !important;
  }
  </style>
  加`!important`是为了覆盖Vuetify自带的高优先级样式。
  
  

• 全局样式配合父类限定范围
  去掉style的scoped属性，同时给父容器v-list加自定义类，避免样式污染其他列表：

  <template>
    <v-list density="compact" class="tight-list">
      <v-list-item density="compact" v-for="date in datesList">
        <!-- 列表项原有内容 -->
      </v-list-item>
    </v-list>
  </template>
  
  <style>
  .tight-list .v-list-item__spacer {
    width: 0;
  }
  .tight-list .v-list-item__prepend {
    margin-right: 0;
  }
  </style>
  
  

• 直接覆盖Vuetify的CSS变量
  Vuetify很多组件样式由CSS变量控制，你可以直接给v-list-item设置对应变量：

  <v-list-item 
    density="compact" 
    v-for="date in datesList"
    style="--v-list-item-spacer-width: 0; --v-list-item-prepend-margin-right: 0;"
  >
    <!-- 列表项原有内容 -->
  </v-list-item>
  

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