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

【问题标题】：mat-theme is not working for mat-select options and mat-datepickermat-theme 不适用于 mat-select 选项和 mat-datepicker
【发布时间】：2020-07-11 13:30:28
【问题描述】：

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

除了 mat select options 和 mat datepicker 的选项外，一切正常

这是我的 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 看起来像这样：

有没有办法在这些垫子组件中应用自定义主题？

【问题讨论】：

什么元素有类light-theme？

标签： angular angular-material

【解决方案1】：

这有点棘手，你需要在你的选择或任何覆盖组件周围绑定一个点击函数，这会将子类添加到子元素，因为在你点击这些覆盖元素之前这是不可用的。

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

Stackblitz with nested class

【讨论】：

【解决方案2】：

您可以对日期选择器使用 panelClass 输入属性并像这样选择：

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

【讨论】：