Vuetify v-list-item 在激活时不会更改文本和图标颜色

Question

** Vuetify v-list-item 处于活动状态时不会更改文本和图标颜色。只有向下箭头会改变颜色。**

 <v-list class="active_list" dense nav>
     <v-list-group
       v-for="item in items"
       :key="item.title"
       v-model="item.active "
       active-class="activelistgroup"
       no-action
     >
       <template v-slot:activator>
         <v-list-item>
           <!-- :to="item.link" -->
           <v-list-item-icon>
           <v-icon v-text="item.action"></v-icon>
         </v-list-item-icon>
           <v-list-item-content>
             <v-list-item-title v-text="item.title"></v-list-item-title>
           </v-list-item-content>
         </v-list-item>
       </template>```
**This is what I have tried for css but not working properly.**


```.active_list .v-list-group .v-list-item--active {
color: #f4f4f4;
}````

Answer 1

我不确定您是否只想将颜色更改为自定义颜色，或者 v-list-item 是否无法正常工作。如果组件未按应有的方式显示，请务必检查您是否将应用程序包装在“v-app”组件中，并且您正在使用的构建是否没有问题，如果出现问题，可能会返回一个版本就是这样。

现在，如果您只想更改颜色或任何其他属性，根据我的经验，您需要开发工具来解决这个问题。撇开玩笑不谈，有很多类和样式与这些组件相匹配，所以有时你需要在你的 css 中真正具体并添加“重要！”。但是，我看到您尝试的 css 还不错，请尝试不在您的样式标签中包含“作用域”属性，这应该可以解决问题。

我假设您使用 .Vue 文件，这是使用 vue 和 vuetify 的“更正确”方式。

因此，如果您进行此更改，您将获得如下内容：

<style>
  .active_list .v-list-group .v-list-item--active {
    color: #f4f4f4 !important;
  }
</style>