javascript - 如何删除 Vuetify 中的填充或边距？

Question

The doc告诉我可以使用辅助类来更改填充/边距。我想从输入字段中删除填充，所以我需要的类是 pa-0 ( {property}{direction}-{size} ):

<v-text-field v-model="mon" pa-0 solo></v-text-field>

JSFiddle这里

不起作用。有什么想法吗？

编辑:我意识到与本地设置相比，我在 JSFiddle 中获得了完全不同的标记，这加剧了我的困惑:

由 Vuetify 在本地生成的标记(这里我想删除 <input> 元素内的垂直填充和 <div class="v-input__slot"> 元素上的水平填充):

<div class="v-input v-text-field v-text-field--enclosed v-text-field--outline v-input--is-label-active v-input--is-dirty theme--light">
  <div class="v-input__control">
    <div class="v-input__slot" style="">
      <div class="v-text-field__slot">
        <input type="text" pa-0="">
      </div>
    </div>
    <div class="v-text-field__details">
      <div class="v-messages theme--light">
        <div class="v-messages__wrapper"></div>
      </div>
    </div>
  </div>
</div>

Vuetify 在 JSFiddle 上使用完全相同的 Vuetify 代码行 (<v-text-field v-model="mon" pa-0 outline></v-text-field>) 生成的标记:

<div class="input-group input-group--text-field">
  <div class="input-group__input">
    <input outline="" pa-0="" tabindex="0" type="text">
  </div>
  <div class="input-group__details">
    <div class="input-group__messages"></div>
  </div>
</div>

整个文档中缺少示例真的无济于事。

Answer 1

使用 hide-details选项:<v-text-field hide-details></v-text-field>删除底部边距，它出现是因为用于显示详细信息的详细信息字段(如果有)。