Угловая материальная укладка

Question

Может показаться, что стиль полосы прокрутки в поле параметра mat указан css. Я хочу сделать полосу прокрутки другого размера и цвета. Буду признателен за любую помощь или направление.

Я попытался сделать это ниже, но это не сработало.

Как изменить стили полосы прокрутки в выборе Angular Material?

  <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
    <mat-option *ngFor="let product of filteredProducts | async" [value]="product">
      {{ product.name }}
    </mat-option>
  </mat-autocomplete>

Answer 1

Чтобы применить стиль к панели автозаполнения, вы просто добавляете класс к элементу автозаполнения. См. Документы по «классу» @Input: https://material.angular.io/components/autocomplete/api#MatAutocomplete.

Например:

<mat-autocomplete class="custom-scroll" #auto="matAutocomplete" [displayWith]="displayFn">

А потом в вашем глобальном scss:

.custom-scroll.mat-autocomplete-panel {

    &::-webkit-scrollbar {
        width: 8px;
    }

    &::-webkit-scrollbar-track {
        border-radius: 4px;
        background-color: green;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: 4px;
        background-color: blue;
    }
}