样式不应用在组件级，但在全球范围内

Question

我使用ngPrime组件，如果我他们的风格样式不应用在dashboard.component.sass文件，但他们申请当我使用全局style.sass文件。

dashboard.component.html文件

<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和全球style.scss文件

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

Answer 1

如果你想设置的风格在你的组件，你只需要要应用规则之前使用ng-deep。

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

这的确已经过时，但目前还没有替代品，因此到目前为止，你不妨用它现在

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

我不知道primeng，但我分叉出颜色变化的老stackblitz（下拉不会对例如打开虽然）

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

其它解决方案

另一个解决方案是设置样式的全局样式表。这将工作前提是你的CSS规则更具体施加默认情况下，那些通过ngPrime