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

问题描述

我正在使用PrimeNG进行Angular项目，我发现以下问题，试图为页面中的 p-calendar 组件提供正确的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日历组件：

<p-calendar inputStyleClass="dateTimeField"  (onSelect)="onDateSelect($event)" (onClearClick)="dt.filter('','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文件中，则仍然无法使用。

我该如何解决此问题？

解决方法

我认为问题在于封装。

您应该将CSS规则放在全局style.css中，否则当视图封装在组件中具有默认值时，默认情况下，Angular会将一个组件的样式隐藏为另一种。

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

请参见示例：https://stackblitz.com/edit/p-calendar-svpn8n?file=src/styles.css

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

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

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

angular angular primeng primeng primeng-calendar