Angular封装PrimeNG的p-inputNumber组件后样式不生效如何解决

• 首先你需要明确：你之前写的样式只选中了<app-number-input>宿主元素本身，而PrimeNG的p-inputNumber实际渲染的输入框元素有自带的背景样式，会覆盖外层宿主的背景设置，所以看不到效果。
• 方案1：直接修改父组件的样式选择器，精准命中内部输入框元素，修改homepagecomponent.scss代码为：

:host ::ng-deep .disabled .p-inputnumber-input {
    background: red;
}

如果你的disabled类是对应组件的禁用状态，还可以加上属性选择器适配：

:host ::ng-deep .disabled.p-inputnumber-disabled .p-inputnumber-input {
    background: red;
}

• 方案2（更规范，避免滥用::ng-deep）：在你的自定义包装组件app-number-input内部做样式承接，首先在app-number-input.component.scss中添加如下样式：

:host(.disabled) .p-inputnumber-input {
  background: red;
}

父组件不需要修改原有调用逻辑，也不需要用::ng-deep就能生效。

• 方案3（支持透传任意自定义类）：在app-number-input中新增输入属性接收自定义类，代码如下：
  app-number-input.component.ts：

@Input() inputCustomClass: string = '';

app-number-input.component.html中绑定类到p-inputNumber：

<p-inputNumber 
  [ngClass]="inputCustomClass"
  <!-- 其他原有属性保持不变 -->
>
</p-inputNumber>

父组件调用时传入类即可：

<app-number-input inputCustomClass="disabled"></app-number-input>

对应样式可以写在全局styles.scss或者父组件样式中（如果写在父组件仍然需要加::ng-deep）。

注意：Angular官方已经标记::ng-deep为废弃语法，长期来看更推荐将PrimeNG组件的覆盖样式统一写在全局样式文件styles.scss中，或者在自定义封装组件中设置encapsulation: ViewEncapsulation.None来处理内部组件样式。

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