如何从角形材料对话框中删除填充？

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 及更高版本）。

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

list_of_strings = ['This is string one.', 'This is string two.', 'This is string three.']
list_of_words = list()

for line in list_of_strings:
    word = line.split()

    for i in word:
        list_of_words.append(i)

print(list_of_words)

然后在我的 encapsulation: ViewEncapsulation.None // ... this._dialog.open(SomeComponent, { panelClass: "foo" });

some-component.component.scss

blitz

Answer 2

在使用您喜欢的浏览器的检查/开发人员工具检查对话框时，您会看到内容包装在具有类名mat-dialog-container的容器中。

尝试使用css / scss：

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

编辑

您可以轻松地在stackblitz上重现此内容-这是link，下面的屏幕快照未显示填充：

Answer 3

作为解决方法，您可以将其放入您的全局样式（src / styles.css）

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

这将更改对话框容器的填充。