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

Question

I want to redefine the style of primeng components by component level not for the whole application, either I need to change the style in the main theme.css file, or in the inline style, but it seems that inline does not work sometimes, as expected, suppose I use

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

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

I need the same component with two diff types, which works best for the same? if anyone having a working example add a link.

Answer 1

The only way I know about this is to use: host and :: ng-deep, called "CSS shadow piercing compilers"

You can enable ViewEncapsulation.Native to use the Shadow DOM, but my understanding is not yet widely supported. Chrome and Safari support it, I think Firefox might be there, but IE is still not able to add this feature.

A good article on the presentation of Encapsulation in angular is here and a good article on shadow piercing. You can also view the documentation for this command from the angular command here.

In my application, I also use PrimeNG. Since I am importing the primeNG component into, let me call MyComponent, which means that the styles applied to MyComponent will be encapsulated and not applied to the PrimeNG UI elements that include. Combined shadow piercings allow me to “punch” through the angular “emulate” Shadow DOM to create PrimeNG material, but it seems a bit dirty and not perfect. I was looking for a way around this, but I don't know anything.

Answer 2

Disable display encapsulation in your component, and then add styles,

 @Component({ selector: 'new-employee-flow', templateUrl: './app/components/my.html', styleUrls: ['./app/components/my.css'], encapsulation: ViewEncapsulation.None }) 

Answer 3

You want to wrap your component in a div with a specific class.

 <div class="myOverride"> 

Now in your .css style, you target the primeng component like this:

 .myOverride .ui-dropdown-item {...} 

Thus, only a wrapped component is created.

Answer 4

Each component is equipped with a set of style classes, using them, you can change the styles, for example

  <p-dropdown [options]="cities" [(ngModel)]="selectedCity"></p-dropdown> 

And the corresponding styles will look like

 .ui-dropdown { background-color:black; } .ui-dropdown-label { color:white; } .ui-dropdown-label:hover{ color:red } .ui-dropdown-item { color:white; background-color:black; } 

Live demo

Answer 5

Try using

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

you will not need a div environment or adding styles to the main style.css