在 v-navigation-drawer 中激活时，v-list-item-title 文本颜色不会改变

Question

我正在尝试使用 Vuetify 框架制作一个应用程序。我一直在修改 v-list-item 的 CSS 属性。

问题是当一个项目处于活动状态时，一切都按预期工作，只有 v-list-item-title 文本不显示。但是，如果我将不透明度更改为 1，如下所示：

.theme--dark.v-list-item--active:hover::before,
.theme--dark.v-list-item--active::before {
  opacity: 1;
  border-left: 3px solid #00ffff;
}

然后显示文本，但背景颜色和左边框丢失。那么，我该如何解决这个问题才能得到想要的结果呢？

我在这里重现了这个问题：https://codepen.io/domarpdev/pen/ZELyEzP

非常感谢任何帮助。谢谢。

Answer 1

您可以将带 -1 的 z-index 放在 .v-list-item--link:before class 上。这对我有用。