垫对话框的角度自定义样式

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（此处为文档）

所以

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，同时在 css 上使用 ::ng-deep。

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;
}
}

Answer 4

我只是改变了这个，它工作得很好：

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

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

Answer 5

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

在样式前添加 ng-deep 即可全局访问它！

::ng-deep {

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

}

Answer 6

解决方案的最佳方法是仅在单个位置更改代码。这可以使用以下代码来完成：

::ng-deep.mat-dialog-container {
overflow: visible;
}

这可以帮助您仅在单个位置更改代码，而不是在所有位置更改。这非常有效。除了相应的 CSS 文件之外，无需在任何地方声明任何其他内容。

Answer 7

它在 Angular 13 中对我有用

在 style.css 中

::ng-deep #dialogTrasparent{
  padding: 0px !important;
  box-shadow: none !important;
  background: transparent !important;

}

和 componenet.ts

const loader = this.dialog.open(DialogLoader, 
{id: 'dialogTrasparent'});

Answer 8

不幸的是，我们无法在

mat-dialog

 配置中设置所有所需的样式。 

MatDialogConfig 允许您仅在配置中设置宽度、高度、最大/最小宽度、最大/最小高度和自定义类，以便通过它们来操作某些特定选项。 但您也可以在 styles.scss

 文件中设置模态的全局样式。
*.ts

let dialogRef = this.matDialog.open(
   SomeEntryComponent, 
   <MatDialogConfig>modalConfig // <- there you can set width/height
);
    dialogRef.afterClosed().subscribe((result: any) => { /* do stuff */ });

全局样式.scss

.cdk-overlay-pane mat-dialog-container.mat-dialog-container { // <- in this way all other styles
  margin: 20px 5px;
  padding: 30px;
}

Answer 9

在全局文件中定义CSS，我们可以使用Mat Dialog API来添加CSS

示例

   constructor(private dialogRef: MatDialogRef<MetricCreateComponent>) { }

   ngOnInit(): void {
        this.dialogRef.addPanelClass('custom-dialog-container-metric-configure');
    }


    onRemoveClick(): void {
        this.dialogRef.removePanelClass('custom-dialog-container-metric-configure');
    }

Answer 10

您需要构建自己的自定义类并在对话框属性 panelClass 中进行设置。

openDialog(): void {
    const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      data: this.data,
      panelClass: 'my-custom-container'
    });
}

在您的 styles.css/styles.scss 中，您写下您的自定义规则。然后你说你想要设置 mat-dialog-title 的样式，为了做到这一点，我使用浏览器检查器并搜索要定位的类名（以查看实际的类名 Angular 将其赋予 html 元素）。我发现该名称为“mat-mdc-dialog-title”，并在我的规则中使用了它。

.my-custom-container {
    background-color: aqua;
}
/* Increasing css specificity by duplicating class */
/* Increasing the specificity is important to overwrite angular
   own rules on the component, without it your rules do not win 
   against angular material dialog's rules.
*/
.my-custom-container .mat-mdc-dialog-title.mat-mdc-dialog-title {
    color: blue;
}

您的对话框的 html 应如下所示：

<section class="my-custom-container">
  <h1 mat-dialog-title>Delete file</h1>
  <div mat-dialog-content>
    Would you like to delete cat.jpeg?
  </div>
  <div mat-dialog-actions>
    <button mat-button mat-button color="accent" mat-dialog-close>No</button>
    <button mat-button mat-raised-button color="primary" mat-dialog-close>Yes</button>
  </div>
</section>

Answer 11

对于 Angular 17 这对我有用：

.mat-mdc-dialog-container .mdc-dialog__surface { padding: 0 !important; } 你必须在全球范围内应用它。