时间戳

首页 > 解决方案 > 为什么我不能设置 PrimeNG p-calenar 组件 CSS 样式？

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

问题描述

我正在使用 PrimeNG 开发一个 Angular 项目，我发现以下问题试图将正确的 CSS 样式提供给我的页面中的p-calendar组件。

基本上在我的 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>

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

我试图这样做：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 文件中，仍然无法正常工作。

我该如何尝试解决此问题？

标签： angularprimengprimeng-calendar

解决方案

我认为问题在于封装。

你应该把你的 css 规则放在你的 globalstyle.css中，否则当视图封装在组件中有它的默认值时，默认情况下 Angular 会将一个组件的样式隐藏到另一个组件中。

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

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

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

推荐阅读