Changing primeng CSS at component level

Question

I understand similar topics have been discussed multiple times, but I couldn't find the solution to the problem I am facing.

I am trying to change the styles of PrimeNG in my angular app.

In my component, I changed .ui-inputext class of PrimeNG.

    body .ui-inputtext {
    font-size: 0.8vw;
    padding:0;
    background-color: #557db1 !important;
}

This is working only when I set encapsulation:ViewEncapsulation.None in my component class.

I also tried using :host >>>

 :host >>>   body .ui-inputtext {
    font-size: 0.8vw;
    padding:0;
    color:red;
    background-color: #557db1 !important;
}

Issue with using encapsulation:ViewEncapsulation.None in my component is that it changes styles of PrimeNGcontrols in the whole app.

I want to make changes to the control only for this component where I have modified CSS class.

Is there something else I need to do or maybe I am missing something here?

This issue was raised on GitHub here (https://github.com/primefaces/primeng/issues/1812) but it was not tracked further.

Answer 1

Add one class to that input field and try to change css using that class rather than using the body and add encapsulation: Viewencaptulation.None in your component.ts file. It will not change other component css.

Here is the example code you can try like this:

<input type="text" class="field_input" pInputText placeholder="Username">

.field_input.ui-inputtext {
  font-size: 0.8vw;
  padding:0;
  background-color: #557db1 !important;
}

Stackblitz Link:

https://stackblitz.com/edit/angular-romzcu?embed=1&file=src/app/app.component.ts