it-swarm.com.ru

Angular Выбор материала: как настроить саму панель .mat-select-panel

У меня есть эта структура HTML, используя Angular Выбор материала

<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%

3
Char

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

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

Вот демо

Правка:

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

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%;
}

демо

4
Just code
  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 для решения вышеуказанных проблем, пожалуйста, обратитесь к ссылке ниже, чтобы узнать о наилучшей практике манипулирования домом в угловых https://blog.angularindepth.com/exploring-angular-dom-abstractions-80b3ebcfc02

1
Akshay Rajput