我正在使用 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 文件中,仍然无法正常工作。
我该如何尝试解决此问题?