Angular 对话框不显示默认值

Question

所以我正在测试 dialog for angular 因为我正在学习如何使用它并且当我尝试运行它时发生了这种情况。以前有人遇到过这个问题吗？没有收到任何错误，但我很确定这不是 Angular 对话框应该看起来的样子。模态的 CSS 也是空的，但我搞砸了无济于事。不幸的是，我无法展示完整的代码，因为它很敏感。

我正在使用 Angular CLI:11.0.1 Angular Material :11.0.0

HTML

<p>test-modal works!</p>

CSS

* {
    background: white;
    color: white;
}

调用对话框的代码

export class BuyProductComponent implements OnInit {

  constructor(public dialog: MatDialog) { }

  openBuyOnlineModal() {
    this.dialog.open(TestModalComponent, {
      hasBackdrop: false
    });
    console.log('meow');
  }

  closeModal() {
    this.dialog.closeAll
  }

  ngOnInit(): void { }
}

Answer 1

尝试在 style.css 文件中添加:

.mat-dialog-container {
  background-color: #fff;
  color: #fff;
  overflow: hidden;
}

您还可以在使用 ::ng-deep

时将其添加到您需要的每个 css 文件中

您还可以在对话框声明示例中提供对话框高度和宽度:

this.dialog.open(DialogComponent, {
  data: {
    //any data
  },
  width: //any width,
  height: //any height
});