如何移除Quasar中q-option-group组件默认添加的q-gutter-x-sm类？

解决方案 #

以下是几种可实现移除q-gutter-x-sm类效果的方案，按推荐优先级排序：

• 方法1：使用Quasar内置类覆盖（最推荐）
  q-gutter-x-sm是Quasar内置的横向间距控制类，你直接给组件追加q-gutter-x-none内置类即可覆盖原有间距效果，完全符合Quasar样式规范，无需额外写自定义样式，修改后代码如下：

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

• 方法2：自定义样式强制覆盖
  如果因为项目样式优先级问题导致方法1不生效，可以给组件绑定自定义类后通过CSS覆盖内置变量：
  模板部分：

<q-option-group
  ...
  class="margin-none no-option-gap"
/>

样式部分（如果style标签加了scoped属性，需要配合:deep()使用）：

/* 非scoped样式写法 */
.no-option-gap.q-gutter-x-sm {
  --q-gutter-x: 0;
}

/* scoped样式写法 */
:deep(.no-option-gap.q-gutter-x-sm) {
  --q-gutter-x: 0;
}

• 方法3：运行时移除DOM类（仅做备选，不推荐）
  前两种方法都不适用的场景下，可以通过ref获取组件实例后直接移除目标类：
  模板部分：

<q-option-group
  ref="optionGroup"
  ...
/>

逻辑部分：

mounted() {
  // Vue2写法
  this.$refs.optionGroup.$el.classList.remove('q-gutter-x-sm')
  // Vue3写法
  // this.$refs.optionGroup.classList.remove('q-gutter-x-sm')
}

内容的提问来源于stack exchange，提问作者Devyani