0

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

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

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

不工作：

时间-edit.component.html

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

time-edit.component.sass

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

作品：

时间-edit.component.html

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

但是，我不想这样设计它。

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

4

1 回答 1

1

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

  1. 采用ViewEncapsulation.None
  2. 使用全局样式
  3. 使用::ng-deep，请注意不推荐使用，因为它已被标记为已弃用

ViewEncapsulation.None你可以在这个 stackblitz中看到一个工作示例

于 2020-05-22T12:20:07.123 回答