mat-theme不适用于mat-select选项和mat-datepicker

Question

我目前正在使用Angular 9和自定义主题的Angular 9应用程序。

一切正常，除了垫选择选项和垫日期选择器的选项

这是我的scss主题代码

@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);
  }
}

具有该主题的其他组件也可以使用，但是mat-select选项和mat-datepicker看起来像这样：

有什么方法可以在这些垫子组件中使用自定义主题吗？

Answer 1

这有点棘手，您需要在您的select或任何叠加组件周围绑定一个click函数，这将向子元素添加子类，因为只有在您点击这些叠加元素后，该子类才可用。

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

Stackblitz with nested class

Answer 2

对于日期选择器，您都可以使用 panelClass 输入属性，并选择如下所示：

<mat-datepicker panelClass="orange"></mat-datepicker>
<mat-select panelClass="orange"></mat-select>