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

前端之家收集整理的这篇文章主要介绍了摆脱Angular Material模态对话框周围的空白区域前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_403_0@ 我想摆脱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链接.

原文链接:https://www.f2er.com/angularjs/141076.html

猜你在找的Angularjs相关文章