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

Mee*_*ary 2 css appbar vue.js vuetify.js

Vuetifyv-app-bar有默认的CSS classesesv-toolbar__contentv-toolbar__extension,增加了16px对x轴和衬垫4px在y轴上,我想摆脱的。

我已经尝试在我的 css 中覆盖这些类,如下所示

.v-toolbar__content {
  padding: 0px !important;
}
Run Code Online (Sandbox Code Playgroud)

但它不起作用。有人知道一些有助于摆脱填充的技巧v-app-bar吗?

Naf*_*war 6

在作用域样式中,您不能直接访问子组件。您需要像这样使用深度选择器

/deep/ .v-toolbar__content {
  padding: 0px !important;
}
Run Code Online (Sandbox Code Playgroud)

或者,如果您想使用子选择器定位,您可以执行以下操作:

.parent-class >>> .v-toolbar__content {
      padding: 0px !important;
}
Run Code Online (Sandbox Code Playgroud)