Удаление отступов по умолчанию на V-App-панели Vuetify

Question

Vuetify v-app-bar имеет по умолчанию css классы v-toolbar__content и v-toolbar__extension, которые добавляют 16px отступ по оси x и 4px по оси y, от которого я хочу избавиться.

Я пытался переопределить эти классы в моем css, как показано ниже

.v-toolbar__content {
  padding: 0px !important;
}

Но это не работает. Кто-нибудь знает какой-нибудь трюк, который поможет избавиться от отступов в v-app-bar?

Answer 1

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

/deep/ .v-toolbar__content {
  padding: 0px !important;
}

Или, если вы хотите использовать таргетинг с использованием дочернего селектора, вы можете сделать.

.parent-class >>> .v-toolbar__content {
      padding: 0px !important;
}