web-dev-qa-db-fra.com

Quel est le meilleur moyen de remplacer le style des composants primeng?

je veux redéfinir le style des composants Primeng en fonction du niveau de composant non pour l'application entière, soit je dois modifier le style dans le fichier theme.css principal ou dans le style en ligne, mais semble inline ne fonctionne pas parfois comme prévu, supposons par exemple que je dois utiliser

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

et je dois changer le style de la classe ui-dropdown-item nom de la classe selon la documentation.

j'ai besoin du même composant avec deux styles de diff quelle est la meilleure approcah pour le même? si quelqu'un a un exemple de travail, veuillez ajouter le lien.

angularprimeng
13
Pardeep Jain

Essayez d'utiliser

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

Vous n'aurez besoin d'aucun div entouré ou de l'ajout des styles au style.css principal.

19
jcdsr

Désactivez l'encapsulation de la 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
})
8
velsim

Puisque >>> est obsolète, vous devez utiliser ::ng-deep à la place de . 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>

5
RZ87

La seule façon de le faire que je connaisse est d'utiliser les commandes: Host et :: ng-deep, appelées "combinateurs de perforations CSS".

Vous pouvez activer ViewEncapsulation.Native pour utiliser le DOM Shadow, mais je crois comprendre qu’il n’est pas encore largement pris en charge. Chrome et Safari le supportent, je pense que Firefox est peut-être là, mais IE n’est pas encore loin d’ajouter cette fonctionnalité.

Bon article sur View Encapsulation in angular ici et un bon article sur le perçage des ombres ici . Vous pouvez également consulter la documentation à ce sujet auprès de l’équipe angulaire ici

Dans mon application, j'utilise aussi PrimeNG. Étant donné que j'importe un composant primeNG dans, appelons-le MyComponent. Cela signifie que les styles appliqués à MyComponent seront encapsulés et ne s'appliqueront pas aux éléments imbriqués de primeNG. Les combinateurs de perforation des ombres me permettent de "percer" à travers le DOM "Shadow" Shadow "émulé" de Angular pour créer le style PrimeNG, mais cela semble un peu compliqué et pas idéal. J'ai cherché un moyen de contourner cela, mais je ne suis au courant de rien.

5
Dave

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

<div class="myOverride">

Maintenant, dans votre style.css, vous ciblez le composant primeng de cette façon:

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

De cette façon, seul le composant encapsulé est stylé. 

2
Alexander Ciesielski

Chaque composant est fourni avec le jeu de classes de style, vous pouvez les utiliser pour modifier les styles

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

Et les styles correspondants seront comme 

.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

1
Aravind