根本无法让 inputStyleClass 工作
Cannot get inputStyleClass to work at all
我在我的一个组件中使用 <p-calendar>。我试图在我的 sass 文件中使用 class 设置样式，但 inputStyleClass 根本没有任何效果。事实上，我什至在 Chromes DevTools 的样式中都看不到 class。但是，它显示为 <input> 元素 (ng-reflect-klass="calendar-input") 的属性。
我已经阅读了我能找到的所有内容（例如 ）并尝试相应地做事。
这些是相关文件的简化示例：
无效：
时间-edit.component.html
<p-calendar [inputStyleClass]="'calendar-input'"></p-calendar>
时间-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 文件中的 class？
这是由于 angular 的 ViewEncapsulation 默认设置为 ViewEncapsulation.Emulated。
为了设置子组件样式，您有以下选项：
- 使用
ViewEncapsulation.None
- 使用全局样式
- 使用
::ng-deep，注意不推荐，因为它是mareked as deprecated
您可以在 this stackblitz
中查看 ViewEncapsulation.None 的工作示例
我在我的一个组件中使用 <p-calendar>。我试图在我的 sass 文件中使用 class 设置样式，但 inputStyleClass 根本没有任何效果。事实上，我什至在 Chromes DevTools 的样式中都看不到 class。但是，它显示为 <input> 元素 (ng-reflect-klass="calendar-input") 的属性。
我已经阅读了我能找到的所有内容（例如
这些是相关文件的简化示例：
无效：
时间-edit.component.html
<p-calendar [inputStyleClass]="'calendar-input'"></p-calendar>
时间-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 文件中的 class？
这是由于 angular 的 ViewEncapsulation 默认设置为 ViewEncapsulation.Emulated。
为了设置子组件样式，您有以下选项：
- 使用
ViewEncapsulation.None - 使用全局样式
- 使用
::ng-deep，注意不推荐，因为它是mareked as deprecated
您可以在 this stackblitz
中查看ViewEncapsulation.None 的工作示例