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

Question

我不知道为什么，但是我的对话框是黑色（＃424242），而实际上是白色（对于我的数据表）。

并且覆盖 CSS 无效。 您是否有任何想法默认更改背景颜色或仅更改颜色？

Answer 1

如果要使用CSS进行操作，则有两种方法。

1. 使用component.css文件

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

1. 使用style.css文件

如果您在角度项目的根文件夹中的style.css中编写CSS，则不必在选择器之前添加::ng-deep。

Answer 2

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

保持一个全局样式表。如果它被拆分为多个样式表，请确保您覆盖材料组件主题的样式表出现在稍后的顺序中。

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

我在我的一个根级 scss 文件中添加了这个以进行对话。 （$grey 是我自己的版本）

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

注意：

<块引用>

'!重要'

在这里很重要:)

Answer 3

F12 Debug on Browser，你会看到ma​​t-dialog-container 标签不属于app-root。 所以你必须在 styles.scss 文件中全局更改 ma​​t-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;
}