Styling v-list-item when used as multi-level menu

Question

I am building a Vue 3 app using Vuetify 3. I have a multi-level menu within a v-navigation-drawer using v-item-group, as recommended in the documentation. But I seem to be unable to change the font size of the menu items within the menu.

The code looks something like this:

<v-list
   density="compact"
   :opened="opened"
   @update:opened="opened = $event.slice(-1)>
   <v-list-group v-for="item in menuItems" :key="item.title" :value="item">
      <template v-slot:activator="{ props }">
         <v-list-item
          v-bind="props"
          :key="item.title"
          :title="item.title">
         </v-list-item>
      </template>
      <v-list-item
        v-for="subMenu in item.subMenuItems"
        :key="subMenu.menu"
        :title="subMenu.menu"
        class="smaller-font"
        @click="log(subMenu.route)">
      </v-list-item>
    </v-list-group>
</v-list>

I've tried everything I can think of to change font of the menu items, including adding a specific class ("smaller-font" in the above) with !important, updating the specific v-list-... class styles, etc., but when I look at the Styles panel in the browser developer tools, the html tag font font-size seems to the one that the browser is respecting.

If it helps, there is a working example of the menu on the Vuetify Playground.

Answer 1

The title in the v-list-item has its own font-size declaration, overriding the one on v-list-item.

You can target it directly, using a :deep selector in scoped CSS:

.smaller-font :deep(.v-list-item-title) {
  font-size: 8px;
}

---

To adjust the height of the list items, you have to override the min-height on the main v-list-item div:

.smaller-font.v-list-item {
  min-height: unset; /* or a length that suits you */
}

Note that you need to beat a selectivity of two classes (it depends on the configuration of the list-item, but initial rules look like .v-list-item--density-compact.v-list-item--one-line). Depending on whether you use scoped styles and the list-item configuration, you might have to check the element and add more classes.

Here it is in the updated playground