Как настроить панель наложения cdk?

Question

Я использую mat-menu и mat-select в разных компонентах. Проблема, с которой я столкнулся, заключается в том, что когда мы устанавливаем

::ng-deep .cdk-overlay-container .cdk-overlay-pane {
}

в обоих файлах компонента css, они конфликтуют друг с другом (что и ожидается). Итак, есть ли способ настроить панель наложения в обоих компонентах, чтобы она не влияла на стиль другого компонента.

Answer 1

Мне удалось изменить вещи, которые являются потомками наложения, например .mat-menu-content, но не наложить сам себя.

В зависимости от того, что вы пытаетесь стилизовать, вы можете сделать это следующим образом:

app.component.s css

::ng-deep .mat-menu-panel {
  background-color: unset;
}

::ng-deep .overlay-style-one .mat-menu-content {
  background-color: aquamarine;
}

::ng-deep .overlay-style-two .mat-menu-content {
  background-color: coral;
}

app.component. html

<ng-container>
  <button mat-button [matMenuTriggerFor]="menu1">Menu 1</button>
  <mat-menu #menu1="matMenu" class="overlay-style-one">
    <button mat-menu-item>Item 1</button>
    <button mat-menu-item>Item 2</button>
  </mat-menu>
</ng-container>

<ng-container>
  <button mat-button [matMenuTriggerFor]="menu2">Menu 2</button>
  <mat-menu #menu2="matMenu" class="overlay-style-two">
    <button mat-menu-item>Item 3</button>
    <button mat-menu-item>Item 4</button>
  </mat-menu>
</ng-container>

Если вы хотите изменить CSS самого .cdk-overlay-pane, я не понимаю, как бы я это сделал. Существует единственный div с cdk-overlay-container, который повторно используется для всех оверлеев, и он является прямым потомком элемента body. В нет родительского селектора в CSS, который, если бы он существовал, мог бы здесь помочь.

В API есть OverlayConfig , но, похоже, он предназначен для изменения Оверлеи по всему миру.