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

Question

我不知道为什么，但我的对话框是黑色(#424242)，而不是默认的白色，我的数据表也是相同的情况。

覆盖CSS无法生效。有人知道如何默认更改background-color或只更改color吗？

- Yannick.fr

---

这可能是因为您正在使用预构建的purple-green.css主题，该主题基于对话框使用的主要和强调颜色。这个预构建的主题故意是一个黑暗主题。如果您不打算使用此主题，则仍然有其他2个浅色主题可供选择：indigo-pink.css或deeppurple-amber.css。请查看主题指南以获取更多信息：https://material.angular.io/guide/theming#using-a-pre-built-theme - Edric

@Edric没错，我已经将purple-green改为indigo-pink，问题得到了解决。谢谢。 - YannickN.fr

Answer 1

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

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

现在将你的类放在任何全局CSS文件中，例如styles.css。 全局作用域应用于该CSS文件。

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

- anilam

---

你需要在CSS中包含“.mat-dialog-container”部分吗？另外，这是否与最新更新保持一致？我相信他们在许多类名前面添加了“mat-mdc”，如果我没有记错的话。 - ScipioAfricanus

Answer 2

如果您想使用CSS实现，则有两种方法：

1. 使用component.css文件

在您的component.css文件中写入::ng-deep <selector>以覆盖Material应用的CSS。

2. 使用style.css文件

如果您将CSS写入位于Angular项目根文件夹中的style.css文件，则不必在选择器前添加::ng-deep。

- Iftifar Taz

---

确实，::ng-deep 很好用，可以覆盖CSS样式。谢谢。 - YannickN.fr

你也应该看一下 @Edric 的评论。那可能是你问题的根源。 - Iftifar Taz

你们俩都帮了我！@Edric 帮我解决了初始问题，而你则覆盖了 CSS。 :o) - YannickN.fr

@Pran Kumar Sarkar，你能否创建一个 StackBlitz 示例并与我们分享？ - Iftifar Taz

我找到了代码的问题。我试图使用:host ::ng-deep选择器设置背景颜色，但我发现在这种情况下:host似乎不起作用。 - Pran Kumar Sarkar

Answer 3

在浏览器上启用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;
}

- HungNM2

---

!important 更改所有对话框。不仅仅是那一个。 - Kainka

Answer 4

在我的情况下，我想要制作透明的材料对话框背景。不幸的是，已经提供的答案都不起作用。但这个方法完美奏效。

重写mdc-dialog__surface类。

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

- Nimantha

Answer 5

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

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

- Stacks Queue

Answer 6

百分之百有效 在你的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;
       }

- Zia Khan

Answer 7

尽量避免使用::ng-deep，因为它已经被弃用。

保留全局样式表。如果将其拆分为多个样式表，请确保您覆盖材料组件主题的样式表位于后面的顺序中。

这将导致覆盖材料类，否则您仍将看到来自材料深色背景的颜色。我犯了这个愚蠢的导入错误。

我在对话框的一个根级别scss文件中添加了这个（$grey是我的自定义版本）。

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

注意：

'!important'

在这里很重要 :)

- minigeek