I'm not being ablet to overwrite Vuetify CSS classes

[strokesws]

Hi everyone, I'm learning how to use Vue and Vuetify, and I'm not being able to overwrite components CSS classes. I was wondering if it's something that I done wrong, like a project configuration.

In the example below I have a v-app-bar and I want to make my v-tab text color white when active or inactive.

<template>
  <v-parallax src="~@/assets/black-woman-reading-book-library.jpg">
    <div class="overlay">
      <v-app-bar app class="main-menu">
        <v-tabs right>
          <v-tab>Tab 1</v-tab>
          <v-tab>Tab 2</v-tab>
          <v-tab>Tab 3</v-tab>
        </v-tabs>
      </v-app-bar>
    </div>
  </v-parallax>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(#262bdb, 40%);
}

.main-menu {
  background-color: transparent !important;

  .v-tabs .v-tab {
    color: white;
  }
}
</style>

https://github.com/strokesws/app-market-vue/blob/dev/src/components/HeaderBanner.vue

I really don't want to use !important like I did for the background-color.

Sorry if I'm posting this in the wrong place - quite new to GitHub community.

[KaelWD]

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

If you don't want to use !important then your selector must be at least as specific as the default one.

[strokesws]

Hi KaelWd, thanks for your answer.

I thought that Vue component CSS would have a bigger weight over Vuetify's. Is there any good practice when doing this that I should follow? Maybe a better way of doing it?