Why I can't apply CSS style to this PrimeNg TextArea form field?

Question

I am finding some problem to correctly set CSS code related to validation status of a PrimeNG Text Area into an Angular project (this PrimeNG component: https://www.primefaces.org/primeng/showcase/#/inputtextarea )

Into a form I have declared a text area like this:

<div class="row">
    <div class="col-2">
      <p>Caratteristiche</p>
    </div>
    <div class="col-10">
        <textarea id="assetFeatures" formControlName="asset_features" [rows]="5" [cols]="30" pInputTextarea autoResize="autoResize"></textarea>
    </div>
</div>

That have the following validation rule defined into the TypeScript code of this component:

asset_features: [null, [Validators.required]],

So the browser render something like this (this is what I am obtaining looking the rendered code with Google Dev Tools):

<div _ngcontent-iaq-c66="" class="row">
    <div _ngcontent-iaq-c66="" class="col-2">
        <p _ngcontent-iaq-c66="">Caratteristiche</p>
    </div>
    <div _ngcontent-iaq-c66="" class="col-10">
        <textarea _ngcontent-iaq-c66="" id="assetFeatures" formcontrolname="asset_features" pinputtextarea="" autoresize="autoResize" ng-reflect-name="asset_features" rows="5" cols="30" class="ng-untouched ng-pristine ng-invalid"></textarea>
    </div>
</div>

So into my styles.css code of my project (where I put the validation CSS settings for others form fields, these others works fine) I put this code in order to highlight in red if the field is not valid:

.p-inputtextarea.ng-untouched.ng-invalid .ui-inputtext,
.p-inputtextarea.ng-dirty.ng-invalid .ui-inputtext ,
.p-inputtextarea.ng-touched.ng-invalid .ui-inputtext {
    border: 1px solid red !important;
    background: rgba(255, 0, 0, 0.35);
    box-shadow: 0 0 5px 1px rgba(255, 0, 0, 0.2) inset !important;
}

I also tried in this way:

p-inputtextarea.ng-untouched.ng-invalid .ui-inputtext,
p-inputtextarea.ng-dirty.ng-invalid .ui-inputtext ,
p-inputtextarea.ng-touched.ng-invalid .ui-inputtext {
    border: 1px solid red !important;
    background: rgba(255, 0, 0, 0.35);
    box-shadow: 0 0 5px 1px rgba(255, 0, 0, 0.2) inset !important;
}

In both cases the CSS settings are not applied, this is what I am obtaining:

As you can see the style for invalid textarea is not applied.

Why? What is wrong? What am I missing? How can I try to fix it?

Answer 1

The issue is mostly related to CSS specificity.

To debug correctly, go to Dev tools and check what's getting overwritten. The red lines in the below screenshot indicate what files are responsible for the styles that are getting applied. If your main stylesheet is not on top of the list then check the angular.json and make sure primeNg is added before your main stylesheet.

If all the above is correct and primeNg is still overwriting your main styles, try ::ng-deep - This is not recommended by Angular as it'll get deprecated soon, but it'll do the trick. check this for more details regarding ng-deep.

Answer 2

The basic concept is that each component hides it's styles from other component so they don't overwrite each other. You can read more about encapsulation here.

...
import { ..., ViewEncapsulation } from '@angular/core';

@Component {
    ...
    encapsulation: ViewEncapsulation.None,
} ...