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

Answer 1

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