angular - ng 选择样式组标题和项目

Question

我在我的 Angular 项目中使用 ng-select ( https://ng-select.github.io/ng-select#/data-sources ) 库来显示下拉列表，如下所示:

<ng-select
  [items]="flattenedSelectList"
  bindLabel="displayName"
  placeholder="Select specialty"
  notFoundText="No results found. Please try a different search criteria."
  bindValue="id"
  groupBy="type"
  [(ngModel)]="selectedSpecialtyId">
</ng-select>

我想为组标题和每个组内的项目设置样式？我该怎么做？

我在我的 .scss 文件中使用了以下内容，但它似乎没有应用更改。 ng-optgroup 用于组标题和 ng-option-label 用于项目。

.ng-optgroup {
  font-weight: bold;
  color: #dbe8ef;
}

.ng-option-label{
  color: red;
}

Answer 1

使用此样式并在核心文件 style.css 中添加:

.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{
  font-weight: bold;
  color: #dbe8ef;
}
.ng-option-label{
  color: red;
}

堆栈 Blitz :https://stackblitz.com/edit/angular-ztb1ug