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コンポーネントの名前空間にカプセル化されるためです。