html - 如何在 PrimeNG 中自定义下拉滚动条

Question

我是 Angular 的新手，正在尝试自定义 PrimeNG 下拉菜单上的滚动条，但没有成功。有谁知道如何做到这一点？

HTML:

<p-autoComplete placeholder="- Select -" (onSelect)="onSelect(dh.head,i)" (onClear)="clearData($event,dh.head, i)" (onDropdownClick)="handleDropdown(event)" field="name" [suggestions]="filteredData" [(ngModel)]="dh.head" (completeMethod)="search($event,i)" [dropdown]="true">
            <ng-template let-colval pTemplate="item">
              <div innerHTML="{{colval.name | highlight:dh.head}}"></div>
            </ng-template>
          </p-autoComplete>

包含滚动条的下拉面板的 CSS:

.ui-autocomplete .ui-autocomplete-panel {
  position: absolute;
  overflow: auto;
  width: 290% !important;
}

我已经尝试将以下 CSS 添加到组件中:

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

但对下拉滚动条没有影响。有任何想法吗？任何帮助将不胜感激。

Answer 1

在加载 PrimeNG 之前，您需要加载要修改的 PrimeNG 组件的 CSS 样式。

这是因为一旦 PrimeNG 加载完毕，样式就会被封装在 Angular 组件命名空间中。