css - 无法从 Vuetify 的工具栏组件中删除左/右填充(间距助手不起作用)

Question

v-toolbar 组件有 default left和 right padding 24px每个(桌面版)。它不能被覆盖。

我试过 Vuetify 的间距助手 (pa-0,ma-0)，但它们所做的只是将 Logo 推到填充下方(您可以在图片中看到)。我也尝试过 css 类(padding-left:0，padding:0)。但是填充留在那里。使用 DevTools 我发现它使用的类是“v-toolbar__content”所以在 <style></style>我试过的部分padding:0 and padding-left:0但没有任何改变。

<v-toolbar>
 <v-toolbar-title class="pa-0">
  <span>
   <v-avatar size="40px" tile>
    <img src="https://cdn.pixabay.com/photo/2016/08/25/07/30/red-1618916_960_720.png" />
    <h1>Title</h1>
    </v-avatar>
   </span>
 </v-toolbar-title>
</v-toolbar>

因此，当我添加 class="pa-0"或 class="pl-0"或覆盖“v-toolbar__content”类的填充时，我希望填充消失但它没有。 Here is an example in sandbox.io editor.

Answer 1

这样解决了。覆盖 v-toolbar__content CSS 类不起作用，因为我在样式标签中有“scoped”关键字。一旦我删除它，它就会工作并删除填充。

<style>
    .v-toolbar__content {
      padding-left: 0px;
    }
</style>