为什么我不能设置 PrimeNG p-calenar component CSS 样式？

Question

我正在使用 PrimeNG 进行 Angular 项目，我发现以下问题试图为 p-calendar[=47= 提供正确的 CSS 样式] 组件到我的页面。

基本上在我的 HTML 代码中我有这样的东西：

<tr class="search-box"> <th></th> <th> <p-calendar inputStyleClass="dateTimeField" (onSelect)="onDateSelect($event)" (onClearClick)="dt.filter('', 'date', 'equals')" [showButtonBar]="true" placeholder="Search by Data inserimento" [readonlyInput]="true" dateFormat="yy-mm-dd"></p-calendar> </th> <th> <input pInputText type="text" (input)="dt.filter($event.target.value, 'name', 'startsWith')" placeholder="Search by Name" class="p-column-filter"> </th> <th> <input pInputText type="text" (input)="dt.filter($event.target.value, 'company.name', 'startsWith')" placeholder="Search by Company" class="p-column-filter"> </th> <th> <input pInputText type="text" (input)="dt.filter($event.target.value, 'company.BU.name', 'startsWith')" placeholder="Search by BU" class="p-column-filter"> </th> <th> <input pInputText type="text" (input)="dt.filter($event.target.value, 'dettaglio_ordine.commessa.code', 'startsWith')" placeholder="Search by Commessa" class="p-column-filter"> </th> <th> <input pInputText type="text" (input)="dt.filter($event.target.value, 'dettaglio_ordine.cliente', 'startsWith')" placeholder="Search by Cliente" class="p-column-filter"> </th> <th> <input pInputText type="text" (input)="dt.filter($event.target.value, 'dettaglio_ordine.cliente_finale', 'startsWith')" placeholder="Search by Cliente Finale" class="p-column-filter"> </th> <th> <input pInputText type="text" (input)="dt.filter($event.target.value, 'dettaglio_ordine.importo_contratto', 'startsWith')" placeholder="Search by Importo Contratto" class="p-column-filter"> </th> <th></th> </tr>

如您所见，第二个标签包含此 p-calendar 组件：

<p-calendar inputStyleClass="dateTimeField" (onSelect)="onDateSelect($event)" (onClearClick)="dt.filter('', 'date', 'equals')" [showButtonBar]="true" placeholder="Search by Data inserimento" [readonlyInput]="true" dateFormat="yy-mm-dd"></p-calendar>

我快要为这个组件设置样式了。与其他 input 标签不同，我无法正确设置样式（基本上是宽度和字体大小）。

我正在尝试按照此处所示进行操作：https://forum.primefaces.org/viewtopic.php?t=2610

所以在我的 CSS 代码中输入：

.dateTimeField { width: 80% !important; }

我还尝试在 p-calendar 组件标签上设置 styleClass="dateTimeField"，然后设置：

.dateTimeField input { width: 80% !important; }

但它仍然无法正常工作，我得到了这个错误的可视化结果：

如您所见，它太大了，没有采用我的 CSS 设置。奇怪的是，如果使用 Chrome 工具，我可以通过以下方式设置正确的宽度：

input.ng-tns-c59-5.dateTimeField.ui-inputtext.ui-widget.ui-state-default.ui-corner-all.ng-star-inserted { width: 80% !important; }

但是，如果我尝试将此 CSS 设置复制并粘贴到我的 Angular 组件的 CSS 文件中，仍然无法正常工作。

我该如何解决这个问题？

Answer 1

我认为问题出在封装上。

您应该将 css 规则放入您的全局 style.css 中，否则当 view-encapsulation 在组件中具有默认值时，Angular 默认会将一个组件的样式隐藏到另一个组件。

这就是您在开发工具中看到 ng-tns-c59-5 的原因。

看那个例子：https://stackblitz.com/edit/p-calendar-svpn8n?file=src/styles.css

更多信息：https://angular.io/api/core/ViewEncapsulation

Answer 2

我自己解决了...我将与这个特定组件相关的样式放入特定组件全局的 CSS 中，将其定义为：

:host ::ng-deep {
  .dateTimeField {
    width: 80% !important;
  }
}

为什么我不能设置 PrimeNG p-calenar component CSS 样式？

Why I can't set PrimeNG p-calenar component CSS style?

primeng

angular

primeng-calendar