How to customize styles in vuetify?

Question

css

Colleagues, good afternoon!
The vuetify framework has its own styles, how to correctly overlap, customize, change styles to your own.
Using the template example

<template>
  <div>
    <v-app-bar
      color="deep-purple "
      height="90"
      class="v-app-bar"
    >
      <div class="brand">
        <v-icon color="white">mdi-near-me</v-icon>
        <span>GOROD BRAND</span>
      </div>

      <SearchCompany />

      <SearchCity />

    </v-app-bar>
  </div>
</template>

v-app-bar is my style class
BUT

<v-app-bar color="deep-purple " height="90" class="v-app-bar">
   Здесь какой-то контент
</v-app-bar>

The output is

<v-app-bar color="deep-purple " height="90" class="v-app-bar">
    <div class="v-toolbar__content" style="height:90px;">
       Здесь какой-то контент
    </div>
</v-app-bar>

vuetify added

<div class="v-toolbar__content" style="height:90px;"></div>

I believe that one should also take into account the v-toolbar__content class, which I don't know anything about.
Where is the guarantee that v-toolbar__content will not change?
At the moment
I do so, something smells like crutches

// Средние девайсы («таблетки», >= 768px)
@media (min-width: 768px) and (max-width: 991.98px) {
  .brand {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .v-app-bar {
    height: $v-app-bar-height;

    .v-toolbar__content {
      padding: 0 12px 0 12px;
    }

  }
}

Answer 1

Good afternoon! Did you find an answer?