角度自定义样式到垫对话框 [英] Angular custom style to mat-dialog

问题描述

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

I am trying to customize the default "mat-dialog" in Angular 5. What I want to achieve is having a toolbar in the upper part of the dialog, which should cover the whole width. However, the mat-dialog-container has a fixed padding of 24px which I could not override. I tried to style both the h1 and the 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'
    });
}

推荐答案

您可以在matDialogConfig对象(

You can pass a custom panelClass in your matDialogConfig Object (doc here)

如此

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

}

在您的自定义panelClass中，您可以覆盖padding:

And in your custom panelClass you can override the padding :

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

但是您的.custom-modalbox应该在全局范围内应用(未在组件样式中定义)

But your .custom-modalbox should be global scoped to be applied (not defined in the component styles )

这篇关于角度自定义样式到垫对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！