我正在使用“Angular 材质”对话框，并尝试将背景设置为自定义颜色。
这个问题已经被问过很多次了，我试着应用答案，但是似乎没有用。具体来说，对话框容器的panelClass似乎没有更新。下面是打开对话框的组件、_theming.scss文件和HTML元素

import { Component, OnInit} from '@angular/core';
import { AuthService } from 'src/app/AuthenticationPackage/core/auth.service'
import { MatDialog, MatDialogConfig } from '@angular/material';
import { FactiondialogComponent } from './factiondialog/factiondialog.component';


@Component({
  selector: 'app-factions2',
  templateUrl: './factions2.component.html',
  styleUrls: ['./factions2.component.scss']
})
export class Factions2Component implements OnInit {

  constructor( public authService: AuthService,
            public dialog: MatDialog ) { }

  ngOnInit(){  }


  openDialog(faction): void{
    const dialogConfig = new MatDialogConfig()

    dialogConfig.disableClose = true;
    dialogConfig.autoFocus = true;
    dialogConfig.data = {faction};
    dialogConfig.panelClass = ".faction-dialog";

    const dialogRef = this.dialog.open(FactiondialogComponent, dialogConfig)

        dialogRef.afterClosed().subscribe(result => {
            console.log("dialog closed");
        });
}
}

_theming.scss部分：

@mixin mat-dialog-theme($theme) {
  $background: map-get($theme, background);
  $foreground: map-get($theme, foreground);

  .faction-dialog{
    background-color:rgb(28, 31, 32)
}

  .mat-dialog-container {
    @include _mat-theme-elevation(24, $theme);
    background: mat-color($background, dialog);
    color: mat-color($foreground, text);
  }
}

@mixin mat-dialog-typography($config) {
  .mat-dialog-title {
    @include mat-typography-level-to-styles($config, title);
  }
}

这是生成的标记，但它不包括我的自定义类。

<mat-dialog-container aria-modal="true" class="mat-dialog-container ng-tns-c12-2 ng-trigger ng-trigger-dialogContainer ng-star-inserted" tabindex="-1" id="mat-dialog-0" role="dialog" style="transform: none;"><!--bindings={
  "ng-reflect-portal": ""
}--><app-factiondialog _nghost-lda-c13="" class="ng-star-inserted"><div _ngcontent-lda-c13="" class="dialogCard"><h2 _ngcontent-lda-c13="" class="mat-dialog-title">The Harpers</h2><mat-dialog-content _ngcontent-lda-c13="" class="mat-typography mat-dialog-content"><p _ngcontent-lda-c13="">
SOME CONTENT THAT DOESNT MATTER TO THE EXAMPLE
            </p></mat-dialog-content><mat-dialog-actions _ngcontent-lda-c13="" align="end" class="mat-dialog-actions"><button _ngcontent-lda-c13="" mat-button="" mat-dialog-close="" class="mat-button mat-button-base" ng-reflect-dialog-result="" type="button"><span class="mat-button-wrapper">Close</span><div class="mat-button-ripple mat-ripple" matripple="" ng-reflect-centered="false" ng-reflect-disabled="false" ng-reflect-trigger="[object HTMLButtonElement]"></div><div class="mat-button-focus-overlay"></div></button></mat-dialog-actions></div></app-factiondialog></mat-dialog-container>

我相信上半部分应该说：

<mat-dialog-container aria-modal="true" class="mat-dialog-container faction-dialog ng-tns-c12-2 ng-trigger ng-trigger-dialogContainer ng-star-inserted" tabindex="-1" id="mat-dialog-0" role="dialog" style="transform: none;">

但我不确定，因为我还没有得到这个工作。我已经按照文档：
https://material.angular.io/components/dialog/api#MatDialogConfig
我不确定是否有什么需要添加到我的应用程序模块或其他地方。
根据Khan先生的要求：
faction2.component.ts:

openDialog(faction): void{


    const dialogRef = this.dialog.open(FactiondialogComponent, {panelClass: 'faction-dialog'})

        dialogRef.afterClosed().subscribe(result => {
            console.log("dialog closed");
        });
}

模态打开屏幕：

HTML检查元素

<mat-dialog-container aria-modal="true" class="mat-dialog-container ng-tns-c12-4 ng-trigger ng-trigger-dialogContainer ng-star-inserted" tabindex="-1" id="mat-dialog-2" role="dialog" style="transform: none;"><!--bindings={
  "ng-reflect-portal": ""
}--><app-factiondialog _nghost-yis-c13="" class="ng-star-inserted"><div _ngcontent-yis-c13="" class="dialogCard"><h2 _ngcontent-yis-c13="" class="mat-dialog-title"></h2><mat-dialog-content _ngcontent-yis-c13="" class="mat-typography mat-dialog-content"><p _ngcontent-yis-c13=""></p></mat-dialog-content><mat-dialog-actions _ngcontent-yis-c13="" align="end" class="mat-dialog-actions"><button _ngcontent-yis-c13="" mat-button="" mat-dialog-close="" class="mat-button mat-button-base" ng-reflect-dialog-result=""><span class="mat-button-wrapper">Close</span><div class="mat-button-ripple mat-ripple" matripple=""></div><div class="mat-button-focus-overlay"></div></button></mat-dialog-actions></div></app-factiondialog></mat-dialog-container>