去掉 Angular Material 模态对话框周围的白色 space

Question

我想去掉 Angular Material 模态对话框中的白色 space。我如何设置 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 panelClass property (or similar) that can be used to target the overlay pane.

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

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

之后，您需要提供 css class 作为对话框的 panelClass 参数：

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

Link 到 StackBlitz Demo. Read this official documentation 了解更多信息。

原答案

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

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

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

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

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

这里是link到Plunker Demo。

Answer 2

我对所选答案发表了评论，但我想在完整答案中进行澄清。如果您将对话框样式添加到您的组件并将 ViewEncapsulation 设置为 None，这些样式将全局影响您的整个应用程序，并且任何未来的对话框都将在没有填充的情况下打开。

而是选择使用对话框的 panelClass 属性:

component.ts

this.dialog.open(MyDialogComponent, {
  panelClass: 'app-full-bleed-dialog', 
  data: ...
});

全局样式表

.app-full-bleed-dialog .mat-dialog-container {
  padding: 0;
}

这样，您仍然可以保持对对话框组件样式的封装，并且可以根据需要有选择地重用 app-full-bleed-dialog class。

要了解有关自定义 Material 组件的更多信息，check out this guide。

Answer 3

如果你想删除填充水平
将对话框内容包装在 <div mat-dialog-content> 元素中，然后像这样删除填充

HTML

<div mat-dialog-content class="mat-dialog-content">
    content
</div>

CSS

.mat-dialog-content {
  padding: 0;
}

（你可以将 margin: -24px; 添加到 .mat-dialog-content class 这将一起删除填充）

Answer 4

扩展@Naisal 答案如果你想要一个更紧凑的angular material对话框，这里有一些你可以使用的样式。

.custom-dialog-container .mat-dialog-container {
    padding: 15px !important;
    overflow-x: hidden;
    overflow-y: hidden;
    top:20px;
}

.mat-form-field-wrapper {
    padding-bottom: 0 !important;
}

.mat-dialog-actions {
    margin-top: -15px;
}

您可以仅为某些对话框创建自定义样式或在您的 style.css 文件

中创建全局样式

去掉 Angular Material 模态对话框周围的白色 space

Get rid of white space around Angular Material modal dialog

angular-material

angular-material2

angular