覆盖 vuetify 按钮文本颜色

Question

如何覆盖工具栏中按钮文本的默认活动颜色：

v-btn(:to="item.path" active-class="v-btn--active toolbar-btn-active") {{item.meta.title}}

我创建了这个类来尝试覆盖它：

.toolbar-btn-active {
  background-color: white;
  &::before {
    background-color: white;
  }
  .v-btn__content {
    color: red !important;
   }
}

只有背景有效。如何修改我的 css 以更新按钮颜色？

这是呈现的 html：

<a href="/document" class="v-btn v-btn--active toolbar-btn-active">
           <div class="v-btn__content">Document</div>
</a>

Answer 1

v-btn--active是默认的活动类（可以用active-class道具改变）。

所以我们可以定位 active-class 并像这样修改 CSS：

.v-btn--active .v-btn__content { 
  color: red 
}  

注意在作用域样式中，我们需要使用深度选择器>>>：

>>> .v-btn--active .v-btn__content