Angular 消除“角度材质模式”对话框周围的空白

我想去掉“角度材质模式”对话框中的空白。如何设置css的样式，使我看不到任何白色？到目前为止，我的css：

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

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

---

更新的答案

从官方文件：

设置覆盖组件的样式

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

通过在全局

样式中添加css类，可以覆盖默认的对话框容器样式。例如：

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

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

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

链接到。更多信息请阅读本文


原始答案

用于用样式替代默认样式

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

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

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

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

这里有一个链接。
我对选择的答案发表了评论，但我想在完整的答案中澄清。如果将对话框样式添加到组件中并将ViewEncapsulation设置为“无”，则这些样式将全局影响整个应用程序，并且将来的任何对话框都将在不填充的情况下打开

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

组件技术

全局样式表

这样，您仍然可以在对话框组件样式上保持封装，并且可以根据需要有选择地重用
应用程序完全出血对话框
类

若要了解有关自定义材质组件的更多信息，请参见。
如果您想水平移除填充物
将对话框内容包装在
元素中，然后像这样删除填充

HTML

（您可以将
边距：-24px；
添加到
.mat对话框内容中
类这将一起删除填充）
这是一种非常强力的方法，因为它将为所有材质对话框添加填充！相反，在对话框的
panelClass
配置中添加一个类，如
app full bleed dialog
。然后，在全局样式中，使用
.app full bleed dialog.mat对话框容器
选择器添加覆盖。如果
panelClass
的值包含一个
-
，则该样式不会应用于角度材质8.2.1中的chlid元素。如果
panelClass
的值，则该操作无效。所以
'panelClass'：'foobar'
有效，但
'panelClass'：'foobar'
无效。更新后的答案对我有效。：）我的自定义类名是“.px login modal”，如果其他人可能对此感兴趣的话。那么，当可以在组件的样式中定义这些样式时，为什么要在全局样式文件中维护覆盖的样式呢？angular提供ViewCapsulation是有原因的。ViewCapsulation仅用于将组件的样式范围限定到组件本身。OP询问（换句话说）如何设计不同的组件。正在加载到对话框中的组件是
.mat dialog container
的子组件，因此如果不使用全局样式，它将无法定位该选择器。这正是
None
所做的，这就是它工作的原因。所以，是的，您的方法是有效的，但是没有可能的方法确保只有一个对话框受到影响。。。如果您可以使用两个对话框进行演示，一个没有填充，另一个有，没有使用panelClass，我会承认。当然，我稍后会看一看，我并不否认您的担忧，我必须首先自己测试它。我必须同意威尔·豪厄尔的观点，从长远来看，更改视图封装实际上会给您带来很多覆盖全局样式的麻烦。我曾经在那里做过那件事。所以这似乎是更好的方法。
this.dialog.open(MyDialogComponent, {
  panelClass: 'app-full-bleed-dialog', 
  data: ...
});

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

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

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