我在尝试实现PrimeNg Inputnumber元素时遇到了麻烦:www.example.comhttps://www.primefaces.org/primeng/showcase/#/inputnumber
根据其文档,有几个属性可以用来设置input元素的样式,最著名的是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元素,但是这里它完全忽略了属性。
我哪里做错了?
4条答案
按热度按时间zvms9eto1#
尝试添加
:host ::ng-deep
样式是有作用域的,并且没有通过嵌套继承。
styleClass
是将类置于PrimeNG组件第一级的属性。inputStyleClass
是一个属性,它将把类放在这个特定组件的输入本身上。我经常不得不使用
styleClass
的样式封装,所以我相信inputStyleClass
也是如此关于
::ng-deep
弃用的文字是的,当然它是不赞成的。完全公平地说,有一个替代方案。但替代方案是巨大的,在我看来,大局是最糟糕的。
您可以使用以下命令更改组件中的ViewEncapsulation,使其正常工作:
encapsulation: ViewEncapsulation.None
如下
Reference 1 about alternatives and reasons of deprecation
Reference 2 about alternatives of ::ng-deep
选择权在您,但就我而言,我将继续使用这种方法和第三方库(如primeNG),因为没有真实的的替代方法。
您可以选择使样式成为全局样式,也可以选择使样式成为范围样式。
为了第三方库的使用而取消封装,在我看来是一个矫枉过正的过程。
通过将ViewEncapsulation设置为none,您将给予样式封装,因此要小心。
uqcuzwp82#
超文本:
CSS:
w80xi6nr3#
缺少样式的原因是组件的类型脚本中的运行时错误,这阻止了DOM的正确编译。我认为这无关紧要,因为它们根本不应该相关,但它们(不知何故)是相关的。由于其他人可能有同样的错误假设,我将这个问题留在这里,而不是删除它。
xdnvmnnf4#
只需将
styleClass="w-full"
添加到p-inputNumber
标签即可调整100%宽度,或根据样式参考https://www.primefaces.org/primeflex/width达到所需宽度不需要
encapsulation: ViewEncapsulation.None
,也不需要额外的css类/样式。