app-commission-me-dialog { margin: 0px; padding: 0px; } .mat-dialog-container { margin: 0px; padding: 0px; }
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 })
.mat-dialog-container { padding: 0px !important; }
这是Plunker Demo的链接.