如何在Quasar中通过:table-header-style设置fontSize和fontWeight？

问题原因 #

Quasar 内置的<q-th>表头单元格自带较高优先级的默认样式规则，自定义的普通类样式权重不足以覆盖字体大小、字体粗细的默认设置，而字体族、字体颜色、背景色的默认优先级更低，所以你的自定义配置可以正常生效。

解决方案 #

• 方案1：使用深度选择器穿透组件样式（适用于全局配置整个表格的表头样式）
  给q-table添加自定义类名，再用深度选择器修改表头样式，Vue3 写法示例：

  <template>
    <q-table class="custom-table" ...其余配置 />
  </template>
  
  <style scoped>
  .custom-table :deep(.q-th) {
    font-size: 16px;
    font-weight: 600;
  }
  </style>
  

  Vue2 环境下将:deep()替换为/deep/或::v-deep即可。
• 方案2：使用header-cell-style属性配置（最高优先级，无需处理样式权重）
  直接在q-table组件上绑定该属性，统一配置所有表头样式：

  <q-table
    :header-cell-style="{
      fontSize: '16px',
      fontWeight: 600
    }"
    ...其余配置
  />
  

• 方案3：在columns配置项中单独设置某列表头样式
  针对需要单独调整的列，在columns的对应配置中添加headerStyle属性：

  const columns = [
    {
      name: 'name',
      label: '姓名',
      field: 'name',
      headerStyle: {
        fontSize: '14px',
        fontWeight: 'normal'
      }
    }
  ]
  

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