Angular Material：更改对话框窗口的背景颜色

Question

我不知道为什么，但我的对话框是black（#424242）而不是white（默认情况下），这对于我的数据表来说是相同的。

覆盖 CSS 不起作用。 有谁知道如何默认更改背景颜色或仅更改颜色？

Answer 1

如果你想用CSS来做，有两种方法。

1. 使用

   component.css

   文件

在

::ng-deep <selector>

文件中写入

component.css

以覆盖材质应用的CSS。

2. 使用

   style.css

   文件

如果您在 Angular 项目根文件夹中存在的

style.css

中编写CSS，则不必在选择器前面添加

::ng-deep

。

Answer 2

在浏览器上

F12调试，你会看到mat-dialog-container标签不属于app-root。 所以你必须在 styles.scss 文件中全局更改 mat-dialog-container 的 CSS：

mat-dialog-container {
   background-color: greenyellow !important;
}

另一种方法是在 styles.scss 中全局更改 Material 主题。

如果您想更改对话框的背景颜色，请将背景颜色设置为=透明度。然后设置对话框组件的背景颜色。

styles.scss：

mat-dialog-container {
  background-color: transparent !important;
  padding: 0px 0px 0px 0px !important;
  overflow: hidden !important;
}

Answer 3

您可以在 matDialogConfig 对象中传递自定义 panelClass。

let dialogRef = dialog.open(MyDialogComponent, {
  panelClass: 'my-css-class'
});

现在将您的类放入任何全局 CSS 文件中，例如在 styles.css 中。全局范围应用于该 CSS 文件。

.my-css-class .mat-dialog-container{
  /* add your styles */
} 

Answer 4

就我而言，我想制作透明材质对话框背景。不幸的是，已经给出的答案不起作用。但这非常有效。

覆盖

mdc-dialog__surface

类，

.mdc-dialog__surface {
  background-color: red !important;
}

Answer 5

在 Angular 15+ 中，如果您只想更改调用对话框的组件中的背景，则可以通过以下方式覆盖背景：

::ng-deep .mat-mdc-dialog-container {
  --mdc-dialog-container-color: #c9e4d9;
}

Answer 6

最好避免 ::ng-deep，因为它已被弃用。

保留全局样式表。如果它被分成多个样式表，请确保您覆盖材质组件主题的样式表按较晚的顺序排列。

这将导致覆盖材质类，否则您仍然会看到材质深色背景的颜色。我犯了这个愚蠢的进口错误。

我将其添加到我的根级 scss 文件之一中以进行对话。 （$灰色是我自己的版本）

mat-dialog-container {
   background: $grey !important;
}

注意：

'！重要'

这里很重要:)

Answer 7

100% 工作 在你的 component.ts 文件中

const dialogCompRef = this.dialog.open(YourDialogComponent,{
  width:'700px',
  height:'550px',
  panelClass: 'bg-color' // Add your custom panel class
});

将其添加到 styles.scss

   .bg-color .mat-dialog-container{
         background-color: red;
       }

Answer 8

要更改 Angular Material 组件的背景颜色，请按照以下步骤操作。

1. 将

   backdropClass: 'your-css-class-name'

   添加到 MatDialog 组件。这将为对话框的背景分配一个自定义类。

   openImageDialog(imageUrl: string) {
   this.dialog.open(ImageDialogComponent, {
     data: {
       imageUrl: imageUrl
     },
     backdropClass: 'your-css-class-name'
   
   });}
   

2. 将以下CSS样式添加到组件的CSS文件中。

   ::ng-deep .cdk-overlay-backdrop.your-css-class-name {
      background-color: red !important; 
   } 
   

由于潜在的样式冲突和维护问题，通常不鼓励使用

::ng-deep

 和 

!important

。但是，在这种特定情况下，它们可能需要覆盖 Angular Material 组件的默认背景颜色。