ng select 样式组 headers 和项目

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>

我想为组 header 以及每个组中的项目设置样式？我该怎么做？

我在我的 .scss 文件中使用了以下内容，但它似乎没有应用更改。 ng-optgroup 组 header 和 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;
}

堆栈闪电战：https://stackblitz.com/edit/angular-ztb1ug

ng select 样式组 headers 和项目

ng select style group headers and items

angular-ngselect

angular