Cannot get inputStyleClass to work at all

Question

I am using <p-calendar> in one of my components. I am trying to style it using a class in my sass-file, but inputStyleClass does not have any effect at all. In fact, I can't even see the class in the styles of Chromes DevTools. It is however shown as an attribute of the <input> element (ng-reflect-klass="calendar-input").

I have read all I could find (e.g. inputStyleClass PrimeNg Angular 2) and tried doing things accordingly.

These are reduced examples of the relevant files:

Does not work:

time-edit.component.html

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

time-edit.component.sass

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

Works:

time-edit.component.html

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

However, I do not want to style it this way.

What am I doing wrong? Why can't my class from the sass file be found?

Answer 1

This happens due to angular's ViewEncapsulation which is set to ViewEncapsulation.Emulated by default.
In order to style a child component style you have the following options:

1. Use ViewEncapsulation.None
2. Use a global style
3. Use ::ng-deep, note this is not recommended since it is mareked as deprecated

You can see a working example with ViewEncapsulation.None in this stackblitz