css 无法设置PrimeNg p输入编号的样式

f3temu5u  于 2023-01-27  发布在  其他
关注(0)|答案(4)|浏览(169)

我在尝试实现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元素,但是这里它完全忽略了属性。
我哪里做错了?

zvms9eto

zvms9eto1#

尝试添加: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,您将给予样式封装,因此要小心。

uqcuzwp8

uqcuzwp82#

超文本:

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

CSS:

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

w80xi6nr3#

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

xdnvmnnf

xdnvmnnf4#

只需将styleClass="w-full"添加到p-inputNumber标签即可调整100%宽度,或根据样式参考https://www.primefaces.org/primeflex/width达到所需宽度
不需要encapsulation: ViewEncapsulation.None,也不需要额外的css类/样式。

相关问题