你遇到的这个问题确实挺常见——直接用内联样式改宽度，组件内部的transform计算还是基于默认的300px，导致隐藏时抽屉露一截。下面给你几种靠谱的解决方法：

方法1：使用组件自带的width属性（推荐） #

Vuetify的v-navigation-drawer其实有专门的width props，直接设置这个属性就能覆盖默认宽度，而且组件会自动同步隐藏时的transform值，不会出现错位。

示例代码：

<v-navigation-drawer 
  id="add-expense-menu"
  width="325px"
  <!-- 其他属性 -->
>
  <!-- 抽屉内容 -->
</v-navigation-drawer>

这个方法最省心，完全符合组件的设计逻辑，不需要额外写CSS。

方法2：自定义CSS变量全局修改 #

如果需要全局修改所有抽屉的默认宽度，可以通过覆盖Vuetify的CSS变量来实现。在你的全局样式文件（比如App.vue的<style>标签或者单独的CSS文件）里添加：

:root {
  --v-navigation-drawer-width: 325px;
}

这样所有的v-navigation-drawer默认宽度都会变成325px，隐藏时的transform也会自动适配这个值。

方法3：针对单个抽屉的自定义样式修正 #

如果只想修改某一个抽屉的宽度，又不想用props的话，可以给抽屉加个自定义类，然后通过CSS覆盖样式，同时修正隐藏状态的transform：

示例代码：

<v-navigation-drawer 
  id="add-expense-menu"
  class="custom-drawer"
  <!-- 其他属性 -->
>
  <!-- 抽屉内容 -->
</v-navigation-drawer>

对应的CSS：

.custom-drawer {
  width: 325px !important;
}

/* 修正隐藏时的transform */
.custom-drawer.v-navigation-drawer--close {
  transform: translateX(-325px) !important;
}

注意这里需要用!important来覆盖组件的默认样式，不过尽量优先用方法1或2，避免不必要的样式冲突。

总结一下，优先用方法1的width props，这是Vuetify官方推荐的方式，能避免很多潜在问题。如果需要全局修改就用方法2，特殊场景再用方法3。

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