title: How do I overwrite a v-btn active class in Vuetify?
body: <p>I am developing a website using Vue.js 2.6.10n with Vuetify 2.1.0 and vue-router 3.1.3. </p>
  
  <p>I have a v-app-bar with v-btns to link to my different pseudo pages and want to have a custom class when the button is active, i.e that it links to the page being currently displayed. Using the <code>active-class</code>of the v-btn, I am able to add style "on top" of the Vuetify default, but not to overwrite it completely. </p>
  
  <p>How can I totally get rid of the default active-class? </p>
  
  <p>My objective is only to have the btn text underlined when it is active, and to get rid of that "button pressed" style which is the default.</p>
  
  <p>Here is a sample of my code:</p>
  
  <pre><code>&lt;template&gt;
  &lt;v-btn
          to="/"
          active-class="active"
          text
          class=" white--text display-1 logo"
          &gt;HOME&lt;/v-btn&gt;
  .
  .
  .
  &lt;/template&gt;
  &lt;style lang="scss" scoped&gt;
  .active {
    border-bottom: solid;
    border-color: yellow;
  }
  &lt;/style&gt;
  </code></pre>