Question

我正在尝试使用css var（）更改角度材质对话框的颜色，但是背景变成了透明，而不是我需要的颜色。

CSS样式：

.custom-dialog >  mat-dialog-container {
  background: var(--background);
}

打开对话框功能：

openDialogForCreateDirectory(): void {
    this.dialog.open(CreateDirectoryComponent, {
      width: '400px',
      panelClass: 'custom-dialog'
    });
  }

Answer 1

您需要使用::ng-deep来将样式强制转换为有角度的材质分量：

::ng-deep .custom-dialog > mat-dialog-container {
  background-color: var(--background);
}

请参阅工作示例：https://stackblitz.com/angular/ebnbevodyrv

Answer 2

要更改角度材质库用户界面中的任何内容，需要在styles.scss中添加css，即根级别。

请参见here

角材料对话框中的透明背景

2 个答案: