Vuetify 3 prepend插槽导致图标颜色/透明度异常的解决方法

问题描述 #

使用Vuetify 3制作导航抽屉时，通过prepend插槽放置的图标会出现颜色轻微修改或透明度变化的问题，直接使用v-icon则颜色表现正常。代码示例如下：

<v-list
  :lines="false"
  nav
>
  <v-list-item
    v-for="item in menu"
    :key="item.title"
    :value="item"
    color="primary"
  >
    <template #prepend>
      <v-icon :icon="item.icon" :color="item.color" />
    </template>

    <v-icon :icon="item.icon" :color="item.color" />

    <v-list-item-title class=" py-1 navigation-headers" v-text="item.title" />
  </v-list-item>
</v-list>

解决方法 #

方法1：使用官方适配组件 #

Vuetify提供了v-list-item-icon组件专门用于列表项的图标展示，它能自动规避插槽的默认样式影响，替换代码如下：

<template #prepend>
  <v-list-item-icon>
    <v-icon :icon="item.icon" :color="item.color" />
  </v-list-item-icon>
</template>

方法2：强制重置图标样式 #

给插槽内的v-icon添加自定义类，强制覆盖继承的透明度或颜色滤镜：

<template #prepend>
  <v-icon :icon="item.icon" :color="item.color" class="prepend-icon-fix" />
</template>

对应的CSS代码：

.prepend-icon-fix {
  opacity: 1 !important;
  filter: none !important;
  color: var(--v-icon-color) !important;
}

方法3：移除列表项的color属性 #

如果v-list-item的color="primary"不是必需的，直接移除该属性，插槽内的图标就不会继承相关样式：

<v-list-item
  v-for="item in menu"
  :key="item.title"
  :value="item"
>

原因说明 #

Vuetify的v-list-item会对prepend插槽内的元素应用导航态默认样式（比如透明度调整），而直接放置的v-icon不受该样式规则影响，因此出现颜色表现差异。上述方法分别通过官方组件适配、强制样式重置、移除样式源头三种方式解决问题。

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