How do I override the style of primeng components?

Question

I want to overright the style of primeng components as per component level not for whole app. Either I have to change the style in main theme.css file or inline style, but seems inline not works sometimes as expected. As example, I have to use

<p-dropdown [options]="cities" formControlName="selectedCity"></p-dropdown> 

And I have to change the style of class ui-dropdown-item class name as per documentation.

I need same component with two diff style what is the correct approach for doing this?

Answer 1

Since >>> is deprecated have to use ::ng-deep instead. With material2 v6 and primeng v5.2.*

:host {      ::ng-deep .prime-slider-override {          background-color: #26A3D1;          background-image:none;          border:none;          color:white;            .ui-slider-range {              background: red;          }      }      }

<p-slider [(ngModel)]="rangeValues"                styleClass="prime-slider-override"></p-slider>

Answer 2

Try using

:host >>> .ui-dropdown-item {...}

You won't need any surrounded div or adding the styles to the main style.css.