如何删除vuetify中列表项的填充

Question

在使用vuetify编写Vue项目时，发现

<v-list>

标签中有无用的padding，具体来说，是关于

<v-list-tile>

标签的。

图片：https://segmentfault.com/img/bVbtemC?w=890&h=1288

有1个父列表项和1个子列表项，左右有一些填充空间。

我按照官方方法设置了

class="pa-0"

，但是当我将这个类添加到周围的所有标签时，它不起作用。

当然直接设置CSS也不行，上图显示目标标签是带有

class="v-list__tile"

的标签，但是CSS在这个类上还是不行。

  <v-navigation-drawer width="200px" stateless value="true"
    class="transparent">
    <v-list subheader dense expand>
      <v-list-group no-action>
        <template v-slot:activator>
          <v-list-tile class="pa-0">
            <v-icon left>home</v-icon>
            <v-list-tile-title>menu-name-m</v-list-tile-title>
          </v-list-tile>
        </template>

        <v-list-tile class="pa-0" @click="onMenuCliked">
          <v-list-tile-title>no child - menu-name</v-list-tile-title>
        </v-list-tile>

      </v-list-group>
    </v-list>
  </v-navigation-drawer>

这是我的部分代码，位于 vue-cli 中。

我知道在

no-action

标签中删除

<v-list-group>

适用于子列表项，但这不是我想要的方式，并且这不适用于父列表项。

我希望我可以控制上图中的绿色填充，或者直接删除它。

Answer 1

v-list-item

呈现以下 html

<div role="listitem">
  <div class="v-list__tile theme--light">

  </div>
</div>

因此设置

class

会将其附加到父级 div，而不是

v-list__tile

- 这实际上是带有填充的 div。
有时 vuetify 解决这个问题的方法是使用

content-class

属性，但这个组件似乎不支持它，所以你必须通过 css 来定位它，例如

.v-list__tile {
  padding: 0  
}

如果您想要更多特异性，您仍然可以使用类：

<v-list-tile class="my-tile">

.my-tile .v-list__tile {
  padding: 0  
}

如果它不起作用并且您正在使用作用域样式，查看更多

Answer 2

V-list 仅添加左侧填充，因此您可以简单地将其删除，而无需将所有填充设置为 0。

要仅删除左侧填充，您只需将“pl-0”类添加到 v-list-tile 即可。

<v-list-tile class="pl-0">

在此处了解有关间距的更多信息。

Answer 3

我解决类似问题的方法是在样式中添加这个：

<style scoped lang="scss">
::v-deep .v-list-item {
  padding: 0;
}

Answer 4

它不正确，但有效：

<v-list-item 
    style="padding-inline-start: 16px !important;"
    :title="item.title"
    :to="item.url"
    :prepend-icon="item.icon"
></v-list-item>