Styles not applying on component level but on global level

Question

I am using ngPrime components and if i style them styles are not applying on dashboard.component.sass file but they apply when i use the global style.sass file.

dashboard.component.html file

<p-dropdown [options]="reports" styleClass="report-dropdown">
      <ng-template let-item pTemplate="selectedItem">
        <i class="fas fa-th" style="fill: white;"></i>
        <span style="vertical-align:middle">
          {{item.label}}</span>
      </ng-template>
    </p-dropdown>

dashboard.component.scss and global style.scss file

.report-dropdown {
  .ui-dropdown-label {
    background-color: $secondary;
    color: white;
  }
  .ui-dropdown-trigger {
    color: white;
    background-color: $secondary;
    border: none;
  }
}

view angular docs for /deep/ so your style can reach deep nested components — ErvTheDev, Mar 28 '18 at 07:16
@ErvinLlojku I am not changing the view encapsulation to none. As it defeats the purpose of view encapsulation itself. I have added styleClass on the component as primeNg suggests but it is not working on component level — Mayank Singh Fartiyal, Mar 28 '18 at 07:18
is dashboard.component.sass included in component decorator? — ErvTheDev, Mar 28 '18 at 07:23
@ErvinLlojku Yes .Other styles are working as expected. Except these ngPrime components — Mayank Singh Fartiyal, Mar 28 '18 at 07:37
@David Tried using >>> /deep ::ngDeep either i dont know how to implement them or they aren't working. Example would be much appreciated. Though these are all deprecated except :host — Mayank Singh Fartiyal, Mar 28 '18 at 07:39
Have you considered looking at https://angular.io/guide/component-styles#style-scope. It doesn't solve your problem but it at least explains why it doesn't work. I had the same issue except I had a component that wrapped another child component. Was not able to get the component style sheet to work except when I added it to the global sheet - now I know why. — Kevin Taing, Feb 03 '19 at 20:57

score 6 · Accepted Answer · answered Mar 28 '18 at 07:56

If you want to set the style in your component, you just need to use ng-deep before the rule you want to apply.

https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

It is indeed deprecated, but there is no replacement so far so you may as well use it for now

dashboard.component.scss

::ng-deep .report-dropdown {
  .ui-dropdown-label {
    background-color: $secondary;
    color: white;
  }
  .ui-dropdown-trigger {
    color: white;
    background-color: $secondary;
    border: none;
  }
}

I don't know primeng, but I forked an old stackblitz showing color change (dropdown does not open on example though)

https://stackblitz.com/edit/primeng-bootstrap-ylpzwd?file=app/app.component.scss

Other solution

The other solution is to set the style in your global style sheet. This will work provided that your CSS rules are more specific that the ones applied by default by ngPrime

There is no explanation on why this issue happens, the first provided solution is deprecated so it's not a good idea to use it and the second solution is repeating the question title. So I don't think it's the exact answer of this question. — Mohammad Rafigh, Jan 09 '21 at 16:25

score -1 · Answer 2 · answered Jan 09 '21 at 16:40

By default, Angular component styles are scoped to affect the component's view. This means that the styles you write will affect all the elements in your component template. They will not affect elements that are children of other components within your template. You can read more about view encapsulation in the Angular documentation.

If your component has view encapsulation turned on (default), your component styles will only affect the top level children in your template. HTML elements belonging to child components cannot be targeted by your component styles unless you do one of the following:

(As you have already mentioned) Add the overriding style to your global stylesheet. Scope the selectors so that it only affects the specific elements you need it to.
Turn view encapsulation off on your component. If you do this, be sure to scope your styles appropriately, or else you may end up incidentally targeting other components elsewhere in your application.
(Not suggested) Use a deprecated shadow-piercing descendant combinator to force styles to apply to all the child elements. Read more about this deprecated solution in the Angular documentation.

OP is using primeng components, so he does not have control over encapsulation. So other solutions remain: global or or `::ng-deep` — David, Jan 11 '21 at 12:09

Styles not applying on component level but on global level

2 Answers2