mat-theme не работает для опций mat-select и mat-datepicker

Question

В настоящее время я работаю в приложении Angular 9 с Angular Материалами и пользовательскими темами.

Все работает, кроме опций опций выбора мата и выбора даты мата

Вот мой s css код темы

@import '~@angular/material/theming';
@include mat-core();
$orange-primary: mat-palette($mat-orange, A400);
$orange-accent:  mat-palette($mat-orange, A700, A200, 900);
$orange-warn:    mat-palette($mat-red, 300);
$orange-theme: mat-dark-theme($orange-primary, $orange-accent, $orange-warn);

.light-theme {

  .orange {
    @include angular-material-theme($orange-theme);
    @include mat-menu-theme($orange-theme);
    @include mat-select-theme($orange-theme);
  }
}

. С этой темой работают и другие компоненты, но параметры выбора матов и средство выбора даты выглядят так:

есть ли способ применить пользовательскую тему в этих компонентах мата?

Answer 1

Это немного сложно, вам нужно связать функцию щелчка вокруг вашего выбора или любого компонента наложения, который добавит дочерний класс к дочернему элементу, так как он недоступен, пока вы не нажмете на этот элемент наложения.

onMatSelectClick(){
    this.overlayContainer.getContainerElement().getElementsByClassName('cdk-overlay-connected-position-bounding-box')[0].classList.add('orange');
}

Stackblitz с вложенным классом