Primeng écrasent les styles du composant

Question

I ont une composante en html:

<app-terminate-product _ngcontent-c27="" _nghost-c37=""> 
    <p-overlaypanel _ngcontent-c37="" ng-reflect-style-class="overlay-content"> 
    <div class="overlay-content ui-overlaypanel........> 

Mon fichier html:

<p-overlayPanel [styleClass]="'overlay-content'">SOME INPUTS HERE</p-overlayPanel> 

Je veux ajouter quelque chose à Ui-overlaypanel mais il ne fonctionne pas mon TerminateProductComponent.scss:

.ui-overlaypanel { something: ..} 

J'ai aussi essayé d'ajouter sélecteur dans mon styles.scss, mais il ne fonctionne pas ..

.overlay-content .ui-overlaypanel {...} 

Comment puis-je ajouter des styles à .ui-overlaypanel?

Answer 1

Vous pouvez créer un nouveau fichier .css, ajouter toutes les modifications nécessaires à ce fichier que vous voulez dans .ui-overlaypanel, puis le charger APRÈS primeng .css le fichier est chargé. Vous pouvez y parvenir en éditant simplement le fichier .angular-cli.json. Trouver styles tableau dans angular-cli.json et ajoutez votre fichier Css après un primeng, par exemple:

"styles": [ 
    "styles.css", 
    "../node_modules/primeng/resources/primeng.min.css", 
    "../node_modules/primeng/resources/themes/omega/theme.css", 
    "overwrite.css" 
    ] 

Vous pouvez également utiliser en ligne [style] comme ceci:

<p-overlayPanel [style]="{'text-align': 'center', 'background-color': 'blue'}">SOME INPUTS HERE</p-overlayPanel>