angular - 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>