无法设置 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>

全球styles.css

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

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

我做错了什么？

Answer 1

尝试添加:host ::ng-deep

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

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

styleClass 是将 class 放在 PrimeNG 组件第一层的 属性。

inputStyleClass 是 属性，它将把 class 放在这个特定组件的输入本身上。

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

也是一样的

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

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

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

encapsulation: ViewEncapsulation.None

如下

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

Reference 2 about alternatives of ::ng-deep

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

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

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

通过将您的 ViewEncapsulation 设置为 none，您就放弃了样式封装，因此请小心。

Answer 2

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