如何从 quasar vue 组件中删除默认添加的类？答案

【问题标题】：how to Remove default added classes from quasar vue components?如何从 quasar vue 组件中删除默认添加的类？
【发布时间】：2021-08-04 09:34:37
【问题描述】：

在我的 quasar 项目中，我使用的是 q-option-group 组件。当我在开发工具中检查它时，它显示一个类默认添加了 q-gutter-x-sm。因为这个类在 div 的右侧增加了额外的空白。所以我想摆脱那个班级。我怎样才能做到这一点？

我的代码是：

<div class="col col-12">
   <q-option-group
     v-model="selectedFeature"
     :options="featureOptions"
     inline
     type="checkbox"
     color="primary"
     class="margin-none"
    />
 </div>

它被渲染为：

<div class="margin-none q-option-group q-gutter-x-sm q-option-group--inline" >
   all options
</div>

所以它添加了我想要删除的 q-gutter-x-sm 类。该怎么做？

【问题讨论】：

样式可能取决于父元素。见Quasar docs: Grid Gutter
我没有在代码的任何地方应用 q-gutter。当我在开发工具中删除“q-gutter-x-sm”时，它按预期工作。所以我想从我的代码中删除这个类。
你可以看看Quasar examples for q-option-group。如果排水沟不存在，它可能来自代码中的某个地方。如果您仍然想要一种解决方法，您还可以添加范围内的 CSS，它可以根据需要覆盖填充/边距。
感谢@PeterKrebs 这么快回复。但这不是边距和填充的问题。
我的意思是，如果您必须使用解决方法，那么您必须摆脱的任何空白都可以覆盖 CSS。你检查过 Quasar 的例子吗？我不认为它们输出网格类，所以你的应用程序中一定有什么东西导致了它们。

标签： javascript jquery quasar

【解决方案1】：

为了解决我在右侧的空白问题，我使用了以下代码而不是 q-option-group。

<div class="row">
   <div
    class="col col-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"
    v-for="option in featureOptions"
    :key="option.value"
   >
   <q-checkbox
     v-model="selectedFeature"
     :val="option.value"
     :label="option.label"
   />
  </div>
</div>

但我不知道如何删除该类。因此，如果您知道答案，请分享。

【讨论】：