CODEWITHSUNDEEP
angularprimengprimeng-dropdowns
Mayank Singh Fartiyal
Mayank Singh Fartiyal

Reputation: 957

Styles not applying on component level but on global level

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;
  }
}

Upvotes: 4

Views: 3489

Answers (2)

Mohammad Rafigh
Mohammad Rafigh

Reputation: 786

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.

Upvotes: -1

David
David

Reputation: 34435

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

Upvotes: 6

Related Questions