样式不适用于组件级别，但不适用于全局级别

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默认应用的CSS规则更具体，这将起作用