PrimeNg p-inputnumber 无法设置样式

Question

我在尝试实现 PrimeNg Inputnumber 元素时遇到了困难：https://www.primefaces.org/primeng/showcase/#/inputnumber

根据其文档，有几个属性可用于设置输入元素的样式，最值得注意的是 styleClass 和 inputStyleClass。不幸的是，它们都不起作用，而是被完全忽略了。

component.html:

<p-inputNumber 
  inputStyleClass="form-control-inputnumber" [(ngModel)]="subwinFld.orderAdd.doubleVal">
</p-inputNumber>

全局样式.css

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

我之前已经使用并成功地设置了其他 primeNg 元素的样式，使用完全相同的策略，例如 p-calendar 元素。但是，这里它完全忽略了属性。

我做错了什么？

Answer 1

缺少样式的原因是组件的打字稿中的运行时错误，这阻止了 DOM 的正确编译。 我认为这无关紧要，因为它们根本不应该相关，但它们（不知何故）是相关的。由于其他人可能有同样的错误假设，我将这个问题留在这里，而不是删除它。

Answer 2

尝试添加:host ::ng-deep

样式是有作用域的，没有嵌套继承。

:host ::ng-deep .form-control-inputnumber {
  background:red;
  width: 100%;
}

styleClass 是将类置于 PrimeNG 组件第一级的属性。

inputStyleClass 是将类放在此特定组件的输入本身上的属性。

我经常要玩styleClass的样式封装，所以我相信inputStyleClass也是一样

关于 ::ng-deep 弃用的消息

是的，它肯定已被弃用。公平地说，还有一个替代方案。但另类的对手是巨大的，在我看来，大局是最糟糕的。

您可以通过更改组件中的 ViewEncapsulation 来使其工作：

encapsulation: ViewEncapsulation.None

如下

@Component({
  selector: '',
  template: '',
  styles: [''],
  encapsulation: ViewEncapsulation.None  // Use to disable CSS Encapsulation for this component
})

Reference 1 about alternatives and reasons of deprecation

Reference 2 about alternatives of ::ng-deep

选择权在你手中，但就我而言，我会继续将此方法与 primeNG 等第三方库一起使用，因为没有真正的替代方案。

您可以选择将您的样式设为全局样式或将您的样式设为范围。

为了第三方库的使用而终止封装，在我看来这是一个矫枉过正的过程。

通过将 ViewEncapsulation 设为 none，您就放弃了样式封装，因此请注意它。