CODEWITHSUNDEEP
cssangularprimeng
oujia
oujia

Reputation: 31

Primeng overwrite styles from component

I have a 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 to add something to ui-overlaypanel but it doesn't work in my TerminateProductComponent.scss:

.ui-overlaypanel { something: ..}

I also tried to add selector in my styles.scss, but it doesn't work..

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

How can I add styles to .ui-overlaypanel ?

Upvotes: 1

Views: 9064

Answers (1)

Haseoh
Haseoh

Reputation: 930

You can create a new .css file, add all necessary changes to that file you want in .ui-overlaypanel and then load it AFTER primeng .css file is loaded. You can achieve it by simply editing the .angular-cli.json file. Find styles array in angular-cli.json and add your .css file after primeng one, for example:

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

You can also use inline [style] like this: 

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

Upvotes: 1

Related Questions