Angular升级至19+PrimeNG19后，自定义p-inputGroupAddon主题样式方法

PrimeNG 18+启用了全新的主题预设系统，组件样式属性命名做了简化，你之前用background是旧的命名方式，所以配置不生效。正确的配置方式如下：

export const MyTheme = definePreset(Lara, {
    semantic: {
        primary: {
            // 你的主色配置代码
        }
    },
    components: {
        // 其他组件的主题配置
        inputgroup: {
            addon: {
                bg: 'var(--p-primary-600)', // 背景色用bg属性
                color: '#ffffff' // 文字颜色用color属性，替换成你需要的颜色值
            }
        }
    }
});

额外说明 #

• 如果需要控制addon的交互状态（比如hover），可以在addon节点下继续嵌套状态配置：

  addon: {
      bg: 'var(--p-primary-600)',
      color: '#ffffff',
      hover: {
          bg: 'var(--p-primary-700)'
      }
  }
  

• 确保你的自定义主题已经正确导入到项目中，并且在angular.json的styles数组里配置了生成的主题CSS文件，或者在main.ts中通过applyTheme(MyTheme)启用主题。

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