删除 Vuetify v-app-bar 上的默认填充

Question

Vuetifyv-app-bar有默认的CSS classesesv-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;
}