2

我正在使用 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 文件中,仍然无法正常工作。

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

4

2 回答 2

2

我认为问题在于封装。

你应该把你的 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

于 2020-08-18T11:07:13.793 回答
1

自己解决了……我把这个特定组件相关的样式放到特定组件全局的CSS中定义为:

:host ::ng-deep {
  .dateTimeField {
    width: 80% !important;
  }
}
于 2020-08-18T12:30:22.723 回答