CODEWITHSUNDEEP
cssangularprimeng
Dheeraj Kumar
Dheeraj Kumar

Reputation: 4175

Changing primeng CSS at component level

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.

Upvotes: 3

Views: 2526

Answers (2)

Zarna Borda
Zarna Borda

Reputation: 745

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

Upvotes: 2

Elanor-L
Elanor-L

Reputation: 251

Try with :host /deep/ in your component css file.

Upvotes: 1

Related Questions