CODEWITHSUNDEEP
htmlcssvue.jsvuetify.js
capiono
capiono

Reputation: 2997

overide the vuetify button text color

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>

Upvotes: 6

Views: 9479

Answers (2)

Mykhailo Kramar
Mykhailo Kramar

Reputation: 61

If you want to apply changes to specified button in html you can add class to v-btn

<v-btn class="primary">Button</v-btn>

<style>
.primary {
  color: yellow !important;
  background-color: blue !important;
}
</style>

Upvotes: 0

Traxo
Traxo

Reputation: 19022

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

Upvotes: 7

Related Questions