Angular Material Select: Как настроить саму .mat-select-панель

Question

У меня есть эта структура HTML с использованием Angular Material Select

<mat-form-field class="year-drpdwn-vacay-stock">
    <mat-select placeholder="Year">
        <mat-option>None</mat-option>
        <mat-option *ngFor="let yr of year"  [value]="yr">{{yr}}</mat-option>
    </mat-select>
</mat-form-field>

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

::ng-deep .mat-select-panel {
    margin-top: 20%; 
} 

в CSS для настройки, но проблема в том, что другие компоненты, содержащие другое поле выбора, также влияют (наследует CSS верхнего предела)

В настоящее время у меня есть этот CSS

.year-drpdwn-vacay-stock mat-select.mat-select :host ::ng-deep .mat-select-panel {
    margin-top: 20%; 
}

Но это все равно не работает.

ОБНОВЛЕНИЕ

Цель: я хочу, чтобы панель опций переместилась немного вниз при открытии окна выбора, поэтому я хочу, чтобы .mat-select-panel имел верхнее поле20%

Answer 1

Используйте cdk-overlay-container в качестве основы и перейдите на панель параметров следующим образом: mat-select использует абсолютную позицию без дочерних элементов.поэтому вам нужно применить свой стиль к cdk-overlay-container

.cdk-overlay-container .cdk-overlay-pane{
   margin-top: 7%;
}

Вот демо 1007 *

Редактировать:

Итак, у вас есть проблема конфликта с другими элементами, которые вы можете добавить

panelClass="testClass"

и

<mat-select placeholder="Favorite food" panelClass="testClass">
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
  </mat-select>

и изменить свой класс следующим образом

.cdk-overlay-container .cdk-overlay-pane .testClass{
margin-top: 7%;
}

демо

Answer 2

1. Если вы примените стиль к классу непосредственно в файле styles.css (root) с тегом! Важный, он перезапишет любые другие стили.Но при этом вы нарушите инкапсуляцию.
2. Если вы применяете стили в компоненте с использованием / deep /, стиль будет перезаписан, mat-form-field / deep / (class-name) {} (Устаревшие проблемы) пожалуйста, прочитайте https://blog.angular -university.io / angular-host-context / для подробного объяснения

3. Из-за проблем с устареванием, вы можете попытаться добавить /удаляйте классы с помощью vanilla javascript, но манипулирование dom напрямую - это плохая практика.

   Резюме: использование устаревшего синтаксиса плохо, применение стиля на корневом уровне вызовет проблемы с инкапсуляцией, манипулирование dom напрямую - плохая практика, поэтому вы можетеиспользуйте инструменты, предоставляемые angular, чтобы манипулировать dom для решения вышеуказанных проблем, пожалуйста, перейдите по ссылке ниже, чтобы узнать о лучших практиках манипулирования dom in angular https://blog.angularindepth.com/exploring-angular-dom-abstractions-80b3ebcfc02