如何修改Quasar Tab标签的字体粗细与字号

直接给q-tabs添加排版类无效，是因为Q-Tab内部的标签文本（.q-tab__label）样式被组件自身CSS优先级覆盖，以下几种方法可以解决：

方法一：深度选择器修改（单文件组件scoped样式） #

在组件的scoped样式中用深度选择器穿透组件内部样式：

<style scoped>
::v-deep .q-tab__label {
  font-weight: bold !important;
  font-size: 16px; /* 替换为你需要的字号 */
}
</style>

注：Vue 2环境下可使用/deep/替代::v-deep。

方法二：全局样式修改（全项目生效） #

在全局CSS文件（如quasar.variables.css或App.vue的全局样式块）中添加：

.q-tab__label {
  font-weight: bold;
  font-size: 16px;
}

方法三：自定义类绑定 #

给每个q-tab添加自定义类，再针对性设置样式：

模板代码 #

<q-tabs
  v-model="tab"
  dense
  active-color="purple"
  indicator-color="purple"
  align="justify"
  narrow-indicator
>
    <q-tab :ripple="false" name="devices" label="Mail" class="custom-tab"/>
    <q-tab :ripple="false" name="device-data" label="Alarms" class="custom-tab"/>
    <q-tab :ripple="false" name="user-roles" label="Movies" class="custom-tab"/>
</q-tabs>

样式代码（scoped环境下） #

<style scoped>
::v-deep .custom-tab .q-tab__label {
  font-weight: bold;
  font-size: 16px;
}
</style>

方法四：使用Slot自定义标签（最灵活） #

通过q-tab的label插槽自定义内容，直接应用Quasar排版类：

<q-tabs
  v-model="tab"
  dense
  active-color="purple"
  indicator-color="purple"
  align="justify"
  narrow-indicator
>
    <q-tab :ripple="false" name="devices">
      <template #label>
        <span class="text-weight-bold text-lg">Mail</span>
      </template>
    </q-tab>
    <q-tab :ripple="false" name="device-data">
      <template #label>
        <span class="text-weight-bold text-lg">Alarms</span>
      </template>
    </q-tab>
    <q-tab :ripple="false" name="user-roles">
      <template #label>
        <span class="text-weight-bold text-lg">Movies</span>
      </template>
    </q-tab>
</q-tabs>

这里text-lg是Quasar预设的大号字体类，可根据需求替换为text-md、text-xl等，也可以自定义字号。

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