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

问题

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.

回答1:

Try using

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

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

回答2:

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>

回答3:

Disable view encapsulation in your component, and then add the styles,

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

回答4:

The only way to do this that I'm aware of is by using the :host and ::ng-deep, called "shadow piercing CSS combinators"

You could enable ViewEncapsulation.Native to employ the Shadow DOM, but my understanding is its not widely supported yet. Chrome and Safari support it, I think Firefox might be there, but IE is still a ways off from adding the feature.

Good article about View Encapsulation in angular here, and a good post about shadow piercing here. You can also view the documentation on this from the Angular team here

In my application im using PrimeNG as well. Since I'm importing a primeNG component into, lets call it MyComponent, that means the styles applied to MyComponent will be encapsulated and wont apply to the primeNG UI elements im incorporating. Shadow piercing combinators allow me to "pierce" through Angular's "emulated" Shadow DOM to style the PrimeNG stuff, but it seems a little messy and not ideal. I've looked for a way around this but I'm not aware of anything.

回答5:

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

<div class="myOverride">

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

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

This way only the wrapped component gets styled.

回答6:

Every component is provided with the set of styling classes, using them you can modify the styles, For instance

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

And the corresponding styles will be as

.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

来源：https://stackoverflow.com/questions/40131174/what-is-best-way-to-override-the-style-of-primeng-components

标签

angular

primeng