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

Question

我想摆脱Angular Material模态对话框中的空白区域。我如何设计CSS的样式，以便看不到任何白色？我的css到目前为止：

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

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

Answer 1

更新了答案

来自官方文件：

  

样式化叠加组件

     

基于叠加的组件有一个panelClass   属性（或类似），可用于定位覆盖窗格。

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

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

之后，您需要提供css class作为对话框的 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的链接。

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类。

要了解有关自定义材质组件的更多信息，请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类中，这将一起删除填充）

Answer 4

如果您想要更紧凑的有角度的材质对话框，请扩展 @Naisal 答案，这里有一些您可以使用的样式。

.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 文件中仅为某些对话框或全局样式创建自定义样式