overide the vuetify button text color

Issue

How do I override the default active color for a button text in a toolbar:

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

I created this class to try to override it:

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

Only the background works. How do I modify my css to update the button color?

This is the rendered html:

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

Solution

v-btn--active is default active class(can be changed with active-class prop).

So we can target active-class and modify CSS like so:

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

Note in scoped style we need to use deep selectors >>>:

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

Answered By - Traxo