angular - 摆脱 Angular Material 模态对话框周围的空白区域

Question

我想去掉 Angular Material 模态对话框中的空白区域。我如何设置 css 样式以便看不到任何白色？到目前为止我的 CSS:

app-commission-me-dialog {
    margin: 0px;
    padding: 0px;
}

.mat-dialog-container {
    margin: 0px;
    padding: 0px;
}

Answer 1

更新的答案

来自官方文档:

Styling overlay components

Overlay-based components have a panelClassproperty (or similar) that can be used to target the overlay pane.

您可以通过在全局 styles.css 中添加一个 css 类来覆盖默认对话框容器样式。例如:

.custom-dialog-container .mat-dialog-container {
    /* add your styles */
}

之后，您需要将 css 类作为 panelClass 参数提供给您的对话框:

this.dialog.open(MyDialogComponent, { panelClass: 'custom-dialog-container' })

链接到 StackBlitz Demo .阅读此 official documentation获取更多信息。

---

原始答案

使用ViewEncapsulation用您的样式覆盖默认样式。

在打开对话框的组件中，进行以下更改:

import {ViewEncapsulation} from '@angular/core';
    
@Component({
  .....,
  encapsulation: ViewEncapsulation.None 
})

并在该组件的 css 文件中，添加以下类:

.mat-dialog-container {
    padding: 0px !important;
}

这里是 Plunker Demo 的链接.