角度自定义样式到mat-dialog

Question

我想在Angular 5中自定义默认的"mat-dialog".我想要实现的是在对话框的上半部分有一个工具栏,它应该覆盖整个宽度.但是,mat-dialog-container有一个24px的固定填充,我无法覆盖.我试着设置h1和mat-dialog-container的样式.

@Component({
selector: 'error-dialog',
template: 
` <h1 mat-dialog-title> ERRORE </h1>             
    <div mat-dialog-content>
        {{data.error}}
    </div>
    <div mat-dialog-actions>
        <button mat-button (click)="onClick()">Ok</button> 
    </div>`,
styles: [
'h1 { background: #E60000; color: white; }',
// 'myDialogStyle .mat-dialog-container { padding: 1px !important;}'
]})

export class ErrorDialog {
constructor(
public dialogRef: MatDialogRef<ErrorDialog>,
@Inject(MAT_DIALOG_DATA) public data: any) { }

onClick(): void {
this.dialogRef.close();
 }
}

openErrorDialog(errore: string): void{
    let dialogRef = this.dialog.open(ErrorDialog, {
        width: '80%',
        data: { error: errore }
        //panelClass: 'myDialogStyle'
    });
}

Answer 1

您可以在matDialogConfig对象中传递自定义panelClass(此处为doc)

所以

openErrorDialog(errore: string): void{
let dialogRef = this.dialog.open(ErrorDialog, {
    width: '80%',
    data: { error: errore }
    panelClass: 'custom-modalbox'
});

}

在您的自定义panelClass中,您可以覆盖填充:

.custom-modalbox {
    mat-dialog-container {
        padding: 0;
    }
}

但是你的.custom-modalbox应该应用于全局作用域(未在组件样式中定义)

Answer 2

这肯定会奏效：

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

Answer 3

当您的样式在全局范围内时， panelClass 可以完美工作，否则它不会，因为样式不可用。

在您的样式之前添加 ng-deep 以全局访问它！

::ng-deep {

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

}

Answer 4

我只是改变了这一点，它完美地工作：

.custom-modalbox >  mat-dialog-container {
        padding: 0px;
}

这里有一个工作示例：https : //stackblitz.com/edit/custom-dialog?file=src/styles.css

Answer 5

您应该同时在组件上使用 panelClass 和 ::ng-deep 在 css 上。

openErrorDialog(errore: string): void{
let dialogRef = this.dialog.open(ErrorDialog, {
    width: '80%',
    data: { error: errore }
    panelClass: 'custom-modalbox'
});
}

在 CSS 中：

::ng-deep .custom-modalbox {
mat-dialog-container {
    padding: 0;
}
}