Angular 为什么我能'；t设置启动p-calenar组件CSS样式？

我正在使用Priming处理一个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组件标记上设置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设置到我的角度组件的CSS文件中，仍然不起作用

---

如何解决这个问题？

我认为问题在于封装

您应该将css规则放入全局

style.css

，否则 默认情况下，当视图封装在组件中具有默认值时，Angular将一个组件的样式隐藏到另一个组件

这就是您在开发工具中看到

ng-tns-c59-5

的原因

看看这个例子：

---

更多信息：

由我自己解决…我将与此特定组件相关的样式放入特定组件全局的CSS中，将其定义为：

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

---

上面的答案不是满足了你的需要吗？@StPaulis我用了另一种方式，某种程度上也是基于你的答案。。。我认为通过这种方式，我可以更好地处理CSS样式，因为我希望避免修改只与特定组件相关的样式的全局样式。如果你把我的答案加入到你的问题中，我将很乐意接受：-）没关系。。。我只是想知道我的解决方案是否有问题。我理解您的观点，您可以使用组件的封装，以避免

：host

和

：：ng deep

，并根据需要在组件中使用您的样式。谢谢你的快速回复。@StPaulis无论如何，我接受了你的ansewr，因为我从中得到了灵感（我不是一个真正的frontender…更多的是backender…当我阅读它时，我理解了错误的原因，以及我过去如何修复类似的东西）

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

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