css - Primeng overwrite styles from component -

i have component in html:

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

my html file:

    <p-overlaypanel [styleclass]="'overlay-content'">some inputs here</p-overlaypanel>    

i want to add ui-overlaypanel doesn't work in terminateproductcomponent.scss:

.ui-overlaypanel { something: ..} 

i tried add selector in styles.scss, doesn't work..

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

how can add styles .ui-overlaypanel ?

you can create new .css file, add necessary changes file want in .ui-overlaypanel , load after primeng .css file loaded. can achieve editing .angular-cli.json file. find styles array in angular-cli.json , add .css file after primeng one, example:

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

you can use inline [style] this:

<p-overlaypanel [style]="{'text-align': 'center', 'background-color': 'blue'}">some inputs here</p-overlaypanel>