PrimeNg p-inputnumber 无法设置样式

Question

我在尝试实现 PrimeNg Inputnumber 元素时陷入困境：https://www.primefaces.org/primeng/showcase/#/inputnumber

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

组件.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
})

关于替代方案和弃用原因的参考 1

参考 2 关于 ::ng-deep 的替代方案

选择是你的，但就我而言，我继续将这种方法与 primeNG 等第三方库一起使用，因为没有真正的替代方案。

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

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

通过将 ViewEncapsulation 设置为 none，您就放弃了样式封装，所以要小心它。

Answer 3

HTML：

<p-inputNumber styleClass="input-styling"></p-inputNumber>

CSS：

::ng-deep .input-styling input {
  width: 20px !important;
}

Answer 4

只需添加

styleClass="w-full"

到

p-inputNumber

标签调整 100% 宽度或根据样式达到所需宽度，参考 https://www.primefaces.org/primeflex/width

不需要

encapsulation: ViewEncapsulation.None

，也不需要额外的CSS类/样式。

Answer 5

class

和

styleClass

应一起使用。我就是这样解决的。

<p-inputNumber class="w-full" styleClass="w-full" formControlName="number" mode="decimal" inputId="number" [useGrouping]="false"> </p-inputNumber>

Answer 6

您可以按如下方式设置样式。

// component html code
<p-inputNumber placeholder="Enter a number" />

// component css code
::ng-deep p-inputnumber,
::ng-deep .p-inputnumber,
::ng-deep .p-input-number-input {
  width: 100% !important;
}