PrimeNg p-inputnumber组件使用inputStyleClass等样式属性不生效问题问询

问题原因及解决方法 #

• 样式优先级不足被覆盖
  这是该组件最常见的样式失效问题，PrimeNG InputNumber内置的.p-inputtext默认样式优先级高于你写的全局自定义类样式，哪怕inputStyleClass已经成功绑定到内部输入框元素，样式也会被默认规则覆盖。你之前对p-calendar等组件的同方案设置生效，是因为其他组件的默认样式优先级更低。
  解决方法：调整全局样式的选择器权重，修改styles.css如下：

  .p-inputnumber input.form-control-inputnumber {
    background: red;
    width: 100%;
  }
  

  若需要快速验证是否为优先级问题，可以临时加!important标记确认，排查出问题后再优化选择器权重避免滥用!important。
• 属性与版本不匹配
  如果你使用的是PrimeNG 10及以下的旧版本，部分迭代版本的输入框自定义类属性名为inputClass而非inputStyleClass，可以尝试替换属性名测试。
• 绑定有效性排查
  打开浏览器开发者工具，定位到InputNumber对应的输入框元素，检查class列表中是否存在form-control-inputnumber：
  • 不存在：检查inputStyleClass属性是否拼写错误，对应模块是否正确导入InputNumberModule
  • 存在：按第一个优先级问题方案处理即可

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