Javascript 如何删除Vuetify中的填充或边距?

Javascript 如何删除Vuetify中的填充或边距?,javascript,html,vuetify.js,Javascript,Html,Vuetify.js,告诉我可以使用助手类更改填充/边距。我想删除输入字段中的填充,因此我需要的类是pa-0({property}{direction}-{size}): 这里 不起作用。有什么想法吗 编辑:我意识到我在JSFIDLE中获得的标记与本地设置完全不同,这加剧了我的困惑: Vuetify本地生成的标记(这里我想删除元素内的垂直填充和元素上的水平填充): Vuetify在JSFIDLE上使用完全相同的Vuetify代码行()生成的标记: 文档中缺少示例确实没有帮助。使用: class=“ma-0

告诉我可以使用助手类更改填充/边距。我想删除输入字段中的填充,因此我需要的类是
pa-0
{property}{direction}-{size}
):


这里

不起作用。有什么想法吗

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


Vuetify本地生成的标记(这里我想删除
元素内的垂直填充和
元素上的水平填充):


Vuetify在JSFIDLE上使用完全相同的Vuetify代码行(
)生成的标记:


文档中缺少示例确实没有帮助。

使用:

class=“ma-0”
删除页边距
class=“pa-0”
删除填充
class=“ma-0 pa-0”
同时删除这两个选项

请注意,这些也是道具,但仅适用于某些(网格)组件,例如:
将起作用,
将不起作用

类添加在顶级元素上,所以如果在某些组件中无法删除与这些类之间的子元素间距,则可能需要使用CSS将相关元素作为目标


避免使用
!重要信息
,在组件上添加自定义类,并检查要编辑的元素,然后检查用于确定其目标的内容-例如
.v-input\u slot
(我们只需要突出显示目标):

然后像这样替换它(
自定义文本字段
是应用于组件的任意自定义类)


使用
隐藏详细信息
选项:
删除底部边距,该边距是由于用于显示详细信息的详细信息字段(如果可用)而出现的。

能否提供笔?是,我用一个演示更新了我的问题你说的是文本字段内部还是外部的填充?我再次编辑了我的问题:JSFIDLE和我的本地设置上的标记完全不同。。。在我的本地设置中,我想删除
元素内的垂直填充和
元素上的水平填充。这不是属性,而是类:
class=“pa-0 ma-0”
,但即使
也不起作用:。如果不手动覆盖,实在无法删除这些填充/边距:/@drake035您能更具体地说明要删除哪些吗?类很可能为否,但可能需要添加
单行
属性,使其居中。(我不清楚您的目标是什么,因为复制中的vuetify版本不匹配)我想删除
元素中的垂直填充和
上的水平填充。目前我正在做的超级丑陋!关于
.v-input_uuslot{…}
input{…}
的重要CSS规则,但我希望有更合适的解决方案可用…@drake035我认为没有类(至少现在没有)来删除这些填充,因为删除这些特定填充可能不是常见的用例(例如,让光标拥抱左边框可能不是常见的设计,这显然是您正在尝试的)。因此,不时使用自己的CSS并没有什么奇怪的。虽然您可能希望将自定义类添加到该v-text-field中,然后将特定于该类子类的CSS作为目标,这样就不会产生任何副作用,例如,
.custom text field.v-input\uU slot
(除非您希望全局使用它).@drake035 Btw,无需
!重要的
,如果您正确地定位它,例如
.v-text-field.v-text-field--封闭的.v-input\u插槽
。这很有效,谢谢
<v-text-field v-model="mon" pa-0 solo></v-text-field>
<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>
<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>
.custom-text-field.v-text-field.v-text-field--enclosed .v-input__slot {
  padding: 0;
}