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

Коллеги, добрый день!

У фреймворка 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;
    }

  }
}
  • Вопрос задан
  • 41 просмотр
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы