角度自定义样式到 mat-dialog [英] Angular custom style to mat-dialog
问题描述
我正在尝试自定义 Angular 5 中的默认mat-dialog".我想要实现的是在对话框的上部有一个工具栏,它应该覆盖整个宽度.但是,mat-dialog-container 有一个固定的 24px 填充,我无法覆盖它.我尝试为 h1 和 mat-dialog-container 设置样式.
@Component({选择器:'错误对话框',模板:` <h1 mat-dialog-title>错误</h1><div mat-dialog-content>{{数据错误}}
<div mat-dialog-actions><button mat-button (click)="onClick()">好的</button></div>`,样式: ['h1 { 背景:#E60000;白颜色;}',//'myDialogStyle .mat-dialog-container { padding: 1px !important;}']})导出类 ErrorDialog {构造函数(public dialogRef: MatDialogRef 您可以在 matDialogConfig 对象中传递自定义 panelClass (文档在这里) 所以 并且在您的自定义 panelClass 中,您可以覆盖填充: 但是您的 .custom-modalbox 应该是全局范围的以应用(未在组件样式中定义) 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.
You can pass a custom panelClass in your matDialogConfig Object (doc here) so And in your custom panelClass you can override the padding : But your .custom-modalbox should be global scoped to be applied (not defined in the component styles ) 这篇关于角度自定义样式到 mat-dialog的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!openErrorDialog(errore: string): void{让 dialogRef = this.dialog.open(ErrorDialog, {宽度: '80%',数据:{错误:错误}panelClass: 'custom-modalbox'});}
.custom-modalbox {垫对话框容器{填充:0;}}
@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'
});
}
openErrorDialog(errore: string): void{
let dialogRef = this.dialog.open(ErrorDialog, {
width: '80%',
data: { error: errore }
panelClass: 'custom-modalbox'
});
}
.custom-modalbox {
mat-dialog-container {
padding: 0;
}
}