Vuetify 3中如何让V-List-Item激活态高亮占满整宽？

在Vuetify 2中，导航抽屉的激活列表项高亮是整宽灰色样式；但升级到Vuetify 3后，高亮默认不再占满整宽（已通过rounded="0"解决圆角问题），尝试active-class和调整width/max-width等CSS属性无效，也找不到样式来源。

以下是可行的解决方法：

方法一：利用CSS变量直接控制（推荐） #

Vuetify 3通过CSS变量控制列表项高亮层的内边距，只需给目标v-list-item添加自定义样式，覆盖--v-list-item-overlay-inset变量即可：

<v-list-item active style="--v-list-item-overlay-inset: 0;">
  <!-- 列表项内容 -->
</v-list-item>

这个变量直接控制高亮背景层的左右偏移，设为0就能让高亮完全贴合导航抽屉的宽度。

方法二：自定义CSS类覆盖样式 #

如果需要批量应用到所有列表项，可以定义一个全局CSS类：

.full-width-active-highlight .v-list-item--active .v-list-item__overlay {
  left: 0 !important;
  right: 0 !important;
  border-radius: 0;
}

然后给v-list或v-navigation-drawer添加这个类：

<v-navigation-drawer class="full-width-active-highlight">
  <v-list>
    <v-list-item active>
      <!-- 列表项内容 -->
    </v-list-item>
  </v-list>
</v-navigation-drawer>

为什么之前调整width无效？ #

Vuetify 3中列表项的高亮背景是v-list-item__overlay元素，它是绝对定位的，默认会继承父元素v-list-item的内边距作为左右偏移。直接调整width只会让它在内容区域内放大，无法突破内边距限制，所以需要修改left和right属性或者对应的CSS变量来拉满整宽。

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