html - 覆盖 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