Angular Material Theme 不会更改 mat-dialog 强调色答案

【问题标题】：Angular Material Theme does not change the mat-dialog accent colorAngular Material Theme 不会更改 mat-dialog 强调色
【发布时间】：2021-04-22 02:28:02
【问题描述】：

我需要根据一个参数更改我的应用程序的颜色主题，这应该是一个非常简单的操作。在我的应用程序中，我使用了 Fuse 角度材质主题。当我尝试从主要主题切换到次要主题时，对话框组件的强调色不会改变，而其他组件（例如导航栏）会改变。

_theme.scss

@import '~@angular/material/theming';
@import './component-themes';

$primary: mat-palette($mat-fusedark);
$accent: mat-palette($mat-light-blue, 600, 400, 700);
$warn: mat-palette($mat-red);
$white: mat-palette($mat-white);
$black: mat-palette($mat-black);

$first-theme: mat-light-theme($primary, $accent, $warn);

$background: map-get($first-theme, background);
$foreground: map-get($first-theme, foreground);

@include angular-material-theme($first-theme);
@include component-themes($first-theme);

$second-primary: mat-palette($mat-fusedark);
$second-accent: mat-palette($mat-green, 600, 400, 700);
$second-warn: mat-palette($mat-red);

$second-theme: mat-light-theme($second-primary, $second-accent, $second-warn);

.second-theme {
  @include angular-material-theme($second-theme);
  @include component-themes($second-theme);
}

组件主题.scss

@import "../partials/navigation";
@import "../partials/dialog";

@mixin component-themes($theme) {
  @include navigation-theme($theme);
  @include dialog-theme($theme);
}

_dialog.scss

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

    @mixin dialog-theme($theme) {
      $accent: map-get($theme, accent);
    
      .dialog-wrapper {
        .mat-dialog-container {
          padding: 0;
          overflow: hidden;
        }
    
        .mat-dialog-title {
          display: flex;
          flex: 1 1 auto;
          justify-content: space-between;
          margin: 0;
          padding: 24px;
    
        }
    
        .mat-toolbar {
          background-color: mat-color($accent) !important;
        }
    
        .mat-dialog-content {
          padding: 16px 32px 0px;
          margin: 0;
        }
    
        .mat-dialog-actions {
          display: flex;
          flex: 1 1 auto;
          margin: 1px 0 0 0;
          padding: 0px 32px 16px;
        }
    
      }
    }

如果我在 _dialog.scss 中更改值

background-color: mat-color($accent) !important;

进入

background-color: green !important;

它工作正常。看起来mat-color($accent)不起作用，但仅适用于该组件的scss。

【问题讨论】：

标签： css angular sass angular-material

【解决方案1】：

对于遇到这个问题的人，我终于找到了解决方案。我无法更改某些组件的主题，因为它们是嵌套的，并且覆盖容器会阻止主题传播。为了修复它，我导入了overlayContainer并在ngOnInit方法中将主题类添加到overlayContainer中。

import {OverlayContainer} from '@angular/cdk/overlay';

constructor(
    private overlayContainer: OverlayContainer
  ) {}

ngOnInit() {
    if (this.data.theme === 'second-theme') {
          this.overlayContainer.getContainerElement().classList.add(this.data.theme);
        }
}

当您知道问题所在时非常简单的解决方案，难的是找到它:)

【讨论】：