Как правильно кастомизировать стили в vuetify?

Question

[Игорь]

У фреймворка vuetify свои стили, как из правильно перекрывать, кастомизировать, менять стили на свои.

На примере шаблона

<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 это мой класс стиля

НО

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

На выходе получается

<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 добавил

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

Я полагаю что нужно так же учитывать класс v-toolbar__content о котором я нечего не знаю .
Где гарантии что v-toolbar__content не изменится?

На данный момент
Я делаю так, что-то пахнет костылями

// Средние девайсы («таблетки», >= 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;
    }

  }
}

Comments

[Любовь]

Добрый день! Удалось найти ответ?

[Игорь]

Любовь В вёрстке я конечно не профи, это не моя лучшая сторона.
Но определенно решение есть и я частично его использую.
Я понимаю, что это не лучший вариант, так как в любой момент автор фреймворка может переименовать имена классов.

Что я делаю.

1. Инспектирую стили
2. Перекрываю, создав такие же имена классов.

Обратите внимание на скриншот.



Только я перестал использовать vuetify, перешёл на quasar.
Те же яйца, только вид сбоку.

В некоторых случаях классы можно указать непосредственно в используемом компоненте.
Можно кастомизировать слоты.

[Любовь]

Игорь, большое спасибо за ответ. Я понимаю, что можно и так, но всё-таки хочется знать как правильно и я пока не нашла ответ на этот вопрос) Буду искать дальше)

[Игорь]

Любовь, Скорее всего вам нужно форкнуть стек и кастомизировать так как вам нужно.

[Любовь]

Игорь, а что такое "форкнуть"?

[Игорь]

Любовь,

Форк (англ. fork — развилка, вилка) или ответвление — использование кодовой базы программного проекта в качестве старта для другого, при этом основной проект может как продолжать существование, так и прекратить его. ... Дериватив является частным случаем форка и подразумевает именно подобное поведение.

Источник