What is Best way to override the style of primeng components?

angular primeng
Pardeep Jain picture Pardeep Jain · Oct 19, 2016 · Viewed 72.3k times · Source

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 let suppose 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 best approcah for the same ? if anyone having working example please add the link.

Answer

jcdsr picture jcdsr · Jan 3, 2018

Try using

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

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

Related questions

What is let-* in Angular 2 templates?

I came across a strange assignment syntax inside an Angular 2 template. <template let-col let-car="rowData" pTemplate="body"> <span [style.color]="car[col.field]">{{car[col.field]}}</span> </template> It appears that let-col …

Read More
prime ng styles not applying angular2

Hi I just started working with angular 2. I found this library PrimeNG, I followed this tutorial: http://blog.davincisoftware.sk/primeng-web-component-framework-based-on-angularjs-2 It it all works, except the styles. They're not applying somehow and I really don't know what to do. …

Read More
Error: Module not found: Error: Can't resolve '@angular/cdk/scrolling'

I am encountering the error: "Module not found: Error: Can't resolve '@angular/cdk/scrolling'" as soon as I add import TableModule from primeNG in app.module.ts. Why is this error is thrown? I don't see any module dependency …

Read More