设置主题 Angular Material 时渲染覆盖容器？

Question

根据this tutorial，我们应该能够添加 class 来呈现支持 Angular Material Select、Snackbar 等的覆盖容器，如下所示：

  themeClass:string = 'my-theme'
  ngOnInit(): void {    
    // remove old theme class and add new theme class
    // we're removing any css class that contains '-theme' string but your theme classes can follow any pattern
    const overlayContainerClasses = this.overlayContainer.getContainerElement().classList;
    const themeClassesToRemove = Array.from(overlayContainerClasses).filter((item: string) => item.includes('-theme'));
    if (themeClassesToRemove.length) {
       overlayContainerClasses.remove(...themeClassesToRemove);
    }
    overlayContainerClasses.add(this.themeClass);
  }

但是我没有从 Material Select 组件中得到任何爱。我用源代码创建了一个 Github Repository。

要重现结果，请执行以下步骤：

Steps to reproduce:
1.git clone git@github.com:fireflysemantics/angular-theming-test.git
2. cd angular-theming-test
3. npm i
4. ng serve -o

app.component.html 模板如下所示：

<h2>Mat Select here</h2>
<mat-form-field appearance="fill">
  <mat-label>Toppings</mat-label>
  <mat-select [formControl]="toppings" multiple>
    <mat-select-trigger>
      {{toppings.value ? toppings.value[0] : ''}}
      <span *ngIf="toppings.value?.length > 1" class="example-additional-selection">
        (+{{toppings.value.length - 1}} {{toppings.value?.length === 2 ? 'other' : 'others'}})
      </span>
    </mat-select-trigger>
    <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
  </mat-select>
</mat-form-field>

<section>
  <div class="example-label">Basic</div>
  <div class="example-button-row">
    <button mat-button>Basic</button>
    <button mat-button color="primary">Primary</button>
    <button mat-button color="accent">Accent</button>
    <button mat-button color="warn">Warn</button>
    <button mat-button disabled>Disabled</button>
    <a mat-button href="https://www.google.com/" target="_blank">Link</a>
  </div>
</section>
<mat-divider></mat-divider>
<section>
  <div class="example-label">Raised</div>
  <div class="example-button-row">
    <button mat-raised-button>Basic</button>
    <button mat-raised-button color="primary">Primary</button>
    <button mat-raised-button color="accent">Accent</button>
    <button mat-raised-button color="warn">Warn</button>
    <button mat-raised-button disabled>Disabled</button>
    <a mat-raised-button href="https://www.google.com/" target="_blank">Link</a>
  </div>
</section>

主题(theme.scss)在styles.scss旁边，实现方式如下：

// define 3 theme color
// mat-palette accepts $palette-name, main, lighter and darker variants
$my-theme-primary: mat-palette($mat-indigo, 700, 300, 900);
$my-theme-accent: mat-palette($mat-light-blue);
$my-theme-warn: mat-palette($mat-deep-orange, A200);

// create theme (use mat-dark-theme for themes with dark backgrounds)
$my-theme: mat-dark-theme(
    $my-theme-primary,
    $my-theme-accent,
    $my-theme-warn
);

并使用以下代码导入 styles.scss：

@import '~@angular/material/theming';

// always include only once per project
@include mat-core();

// import our custom theme
@import 'theme.scss';

// specify theme class eg: <body class="my-theme"> ... </body>
.my-theme {
  
  // use our theme with angular-material-theme mixin
  @include angular-material-theme($my-theme);
}/* You can add global styles to this file, and also import other style files */

关于如何修复覆盖代码以便 select 能够呈现的任何想法？

[我也在 Angular Material 存储库中询问了这个问题，因为这似乎有点棘手。

https://github.com/angular/components/issues/24858

我添加了一些我在 Chrome 和 Firefox 中获得的截图：

Answer 1

无法使您的存储库正常工作，因此我使用您的代码创建了一个新项目。正如您在屏幕截图中所见，工作得非常好。

Select dark mode

Answer 2

只需将深色背景添加到您的应用中，您就可以看到 select 框。一旦您添加深色模式，它就会变为白色，并且这不会与白色背景一起出现。在 Firefox 和 Chrome 中测试。查看屏幕截图。

只需将 appcomponent.html 中的代码包装在 div 中，然后添加 mat-app-background.

<div class="mat-app-background">
<YOUR CODE HERE>
</div>

希望对您有所帮助！

设置主题 Angular Material 时渲染覆盖容器？

Rendering Overlay Containers when theming Angular Material?

javascript

css

sass

angular-material

angular