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

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;
}