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

发布时间：2020-12-17 08:51:32 所属栏目：安全来源：网络整理

导读：我想摆脱Angular Material模态对话框中的空白区域.我如何设计CSS的样式,以便看不到任何白色？我的css到目前为止： app-commission-me-dialog { margin: 0px; padding: 0px;}.mat-dialog-container { margin: 0px; padding: 0px;} 更新的答案从官方文档： St

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

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

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

更新的答案

从官方文档：

Styling overlay components

Overlay-based components have a panelClass
property (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的链接.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!