Vuetify 3多级菜单中v-list-item的字体大小样式调整问题

在Vue 3 + Vuetify 3的v-navigation-drawer中使用v-list-group实现多级菜单时，直接给v-list-item添加自定义类修改字体大小无效，核心原因是Vuetify的内置样式直接作用于v-list-item内部的.v-list-item-title元素，自定义类的样式优先级不足以覆盖内置样式。

以下是几种可行的解决方法：

方法1：使用Vue深度选择器（推荐用于scoped样式） #

如果你的样式是scoped的，需要用:deep()穿透样式隔离，精准选中内部的标题元素：

<style scoped>
:deep(.smaller-font .v-list-item-title) {
  font-size: 0.8rem; /* 替换为你需要的字体大小 */
}
</style>

方法2：利用Vuetify内置CSS变量（最优雅的方式） #

Vuetify为组件提供了可自定义的CSS变量，直接修改--v-list-item-title-text-size变量即可：

<style scoped>
.smaller-font {
  --v-list-item-title-text-size: 0.8rem;
}
</style>

这种方式不需要使用!important，完全符合Vuetify的设计规范。

方法3：全局样式（需注意样式污染） #

如果不使用scoped样式，可以直接在全局样式中定义：

.smaller-font .v-list-item-title {
  font-size: 0.8rem;
}

建议给v-navigation-drawer添加一个唯一类名，比如custom-drawer，来限定样式作用范围，避免影响其他组件：

.custom-drawer .smaller-font .v-list-item-title {
  font-size: 0.8rem;
}

另外，你的代码中存在一处语法错误：v-list的@update:opened属性值缺少闭合引号和括号，正确写法应为：

@update:opened="opened = $event.slice(-1)"

内容的提问来源于stack exchange，提问作者payetools-steve