如何从角度材质对话框中删除填充？

Question

请参阅以下链接了解问题描述。

我想删除蓝色圆圈的空格。默认情况下显示此填充。 （如何将上、下、左、右内边距设置为0px）

https://github.com/angular/material2/issues/14388

谢谢你的帮助

.html代码

<h1 mat-dialog-title>Hi {{data.name}}</h1>
<div mat-dialog-content>
  <p>What's your favorite animal?</p>
  <mat-form-field>
    <input matInput [(ngModel)]="data.animal">
  </mat-form-field>
</div>
<div mat-dialog-actions>
  <button mat-button (click)="onNoClick()">No Thanks</button>
  <button mat-button [mat-dialog-close]="data.animal" cdkFocusInitial>Ok</button>
</div>

.ts代码

import {Component, Inject} from '@angular/core';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';

export interface DialogData {
  animal: string;
  name: string;
}

/**
 * @title Dialog Overview
 */
@Component({
  selector: 'dialog-overview-example',
  templateUrl: 'dialog-overview-example.html',
  styleUrls: ['dialog-overview-example.css'],
})
export class DialogOverviewExample {

  animal: string;
  name: string;

  constructor(public dialog: MatDialog) {}

  openDialog(): void {
    const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      width: '250px',
      data: {name: this.name, animal: this.animal}
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
      this.animal = result;
    });
  }

}

@Component({
  selector: 'dialog-overview-example-dialog',
  templateUrl: 'dialog-overview-example-dialog.html',
})
export class DialogOverviewExampleDialog {

  constructor(
    public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
    @Inject(MAT_DIALOG_DATA) public data: DialogData) {}

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

}

Answer 1

对于任何可能仍需要此功能的人（使用 Angular Material 7 及以上）。

正确的解决方案是在打开对话框时添加一个类：

encapsulation: ViewEncapsulation.None
// ...
this._dialog.open(SomeComponent, { panelClass: "foo" });

然后在我的

some-component.component.scss

/* SCSS */
.foo .mat-dialog-container  {
  padding: 0;
}

闪电战

Answer 2

这些是以下步骤，使用这个你可以去掉多余的填充和不必要的圆角。

第1步：

a.将此 css 添加到您的 component.scss/css 中。

    .mat-mdc-dialog-container .mdc-dialog__surface {
    border-radius: 0px !important;
    padding: 0px !important;
  }

b.之后，在您的 component.ts 中设置无封装。

    @Component({
    selector     : 'test',
    templateUrl  : './test.component.html',
    styleUrls       : [`./test.component.scss`],
    encapsulation: ViewEncapsulation.None
})

第2步：

如果你想避免封装，只需将此 css 添加到你的 component.scss/css 中即可。

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