根本无法让 inputStyleClass 工作

Question

我在我的一个组件中使用<p-calendar>。我正在尝试使用我的 sass 文件中的一个类来设置它的样式，但 inputStyleClass 根本没有任何效果。事实上，我什至看不到 Chromes DevTools 样式中的类。然而，它显示为<input> 元素 (ng-reflect-klass="calendar-input") 的属性。

我已经阅读了我能找到的所有内容（例如inputStyleClass PrimeNg Angular 2）并尝试做相应的事情。

这些是相关文件的简化示例：

不起作用：

time-edit.component.html

<p-calendar [inputStyleClass]="'calendar-input'"></p-calendar>

time-edit.component.sass

.calendar-input
  border-left: 5px solid #a94442 !important

作品：

time-edit.component.html

<p-calendar [inputStyle]="{'border-left': '5px solid #a94442'}"></p-calendar>

但是，我不想这样设置样式。

我做错了什么？为什么找不到我的 sass 文件中的类？

Answer 1

这是因为 Angular 的 ViewEncapsulation 默认设置为 ViewEncapsulation.Emulated。
为了给子组件样式设置样式，您有以下选项：

1. 使用ViewEncapsulation.None
2. 使用全局样式
3. 使用::ng-deep，注意不推荐使用，因为它是mareked as deprecated

您可以在this stackblitz 中查看带有ViewEncapsulation.None 的工作示例