为什么 vuetify 前置槽会修改图标颜色？

Question

我正在使用 Vuetify 3 制作一个简单的导航抽屉。每当我使用图标的前置插槽时，似乎颜色略有修改或图标的透明度发生了变化：

   <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>

当仅使用图标而不使用前置插槽时，颜色是正确的/我更喜欢它们（参见附图）。

我检查了两个图标上的应用类，它们是相似的。

如何使用前置插槽并让图标具有原始颜色/透明度？

Answer 1

默认图标的不透明度由以下 CSS 规则设置：

.v-list-item__prepend > .v-badge .v-icon,
.v-list-item__prepend > .v-icon,
.v-list-item__append > .v-badge .v-icon,
.v-list-item__append > .v-icon {
  opacity: var(--v-medium-emphasis-opacity);
}

1. 确保您的

   v-icon

   是具有

   .v-list-item__prepend

类的元素的直接子元素
2. 确保您的

   v-icon

   有课程

   .v-icon