Quelle est la meilleure façon d'Outrepasser le style des composants primeng?

Essayez d'utiliser

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

vous n'aurez pas besoin de div entouré ou d'ajouter les styles à la main style.css.

désactivez l'encapsulation de vue dans votre composant, puis ajoutez les styles,

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

la seule façon de le faire que je connaisse est d'utiliser le: host et:: ng-deep, appelé "shadow piercing CSS combinators"

vous pouvez activer ViewEncapsulation.Natif pour employer le DOM de L'ombre, mais ma compréhension est son pas largement soutenu encore. Chrome et Safari le prennent en charge, je pense que Firefox pourrait être là, mais IE est encore un peu loin de l'ajout de la fonctionnalité.

Bon article sur la Vue de l'Encapsulation dans angulaire ici, et un bon billet sur l'ombre piercing ici. Vous pouvez également consulter la documentation à ce sujet à partir de L'équipe angulaire ici

dans mon application, j'utilise aussi PrimeNG. Puisque j'importe un composant premeng dans, appelons-le Miscomponent, cela signifie que les styles appliqués à Miscomponent seront encapsulés et ne s'appliqueront pas aux éléments im incorporating de premeng UI. Les combinateurs Shadow piercing me permettent de "percer" à travers le DOM Shadow "émulé" D'Angular pour styliser les trucs PrimeNG, mais ça semble un peu bordélique et pas idéal. J'ai cherché un moyen de contourner ça, mais je ne suis au courant de rien.

vous voulez envelopper votre composant dans un div avec une classe spécifique.

<div class="myOverride">

Maintenant, dans votre style.css vous permet de cibler les primeng composante de cette façon:

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

de cette façon, seul le composant enveloppé est stylisé.

chaque composant est fourni avec l'ensemble des classes de style, en les utilisant vous pouvez modifier les styles, par exemple

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

Et le correspondant de styles

.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

La seule chose qui a fonctionné pour moi avec material2 v6 et 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>