如何仅替换或覆盖PrimeVue ProgressBar组件的bg-*类？

问题核心是直接给pt:value:class赋值字符串会覆盖组件所有默认类，导致布局错乱。可以通过PrimeVue Pass Through的函数形式合并默认类与自定义背景类，无需手动维护基础类。

步骤1：统一背景类命名 #

先修正getScoreBackgroundColor的返回值，确保所有类都带bg-前缀（保持Tailwind规范，避免遗漏）：

const getScoreBackgroundColor = (score?: number) => {
  if (!score) {
    return "bg-grey-medium";
  }

  if (score <= 50) {
    return "bg-red-medium";
  } else if (score > 50 && score <= 66) {
    return "bg-orange-medium";
  } else if (score > 66 && score <= 83) {
    return "bg-amber-medium";
  } else {
    return "bg-green-medium";
  }
};

步骤2：用Pass Through函数合并类 #

使用函数形式的Pass Through，获取组件默认类后，追加自定义背景类（或替换原有bg类）：

方案1：追加背景类（优先级更高，会覆盖默认bg） #

<ProgressBar
  :value="70"
  :pt:value="(options) => ({
    class: `${options.class} ${getScoreBackgroundColor(70)}`
  })"
/>

方案2：替换原有bg类（更严谨，避免多个bg类冲突） #

如果需要彻底替换组件默认的bg类，用正则移除原有bg-*类后再添加新类：

<ProgressBar
  :value="70"
  :pt:value="(options) => ({
    class: `${options.class.replace(/bg-\S+/g, '')} ${getScoreBackgroundColor(70)}`.trim()
  })"
/>

原理说明 #

PrimeVue的Pass Through函数会接收options参数，其中options.class包含组件原生的所有布局类（比如对齐、宽高相关）。通过字符串拼接或正则替换，仅修改背景色相关的类，保留其他默认样式，完全符合预设组件的设计初衷。

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