Mat-Dialog 在页面底部打开而不是弹出窗口？

Question

我正在尝试使用 Mat-Dialog 打开弹出窗口，但它出现在页面底部。

我尝试了这两个页面中的所有解决方案：

matDialog 未作为对话框打开

模态/对话框在屏幕底部打开，并且行为不正常

而且它们都无法正常工作。我的代码看起来像这样

TS

@Component({
  selector: 'cardboxes-linkboxes',
  templateUrl: './cardboxes.component.html',
  styleUrls: ['./cardboxes.component.scss']
})
export class CardboxesComponent implements OnInit {

  constructor(private dialog: MatDialog) { }

  ngOnInit() {}

  openDialog() {
    this.dialog.open(Description)
  }
  
}

@Component({
  selector: 'app-description-dialog',
  templateUrl: './description-dialog.component.html'
})

export class Description {

  constructor(public dialogRef: MatDialogRef<Description>) {}

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

}

样式.scss

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

index.html

<link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block" rel="stylesheet">

angular.json

"styles": [
              "src/styles.scss",
              {
                "input": "node_modules/@angular/material/prebuilt-themes/purple-green.css"
              }
]

我还将这两个组件添加到了app.module文件中@ngmodule的入口组件中

这些主要是其他问题的建议，但它仍然呈现在页面底部，如下所示：

如您所见，该对话框位于页面底部我的背景图像下方。我希望它以弹出的方式出现在页面上。
我做错了什么可以让它正常工作吗？
如何让我的弹出窗口出现在页面中央？

Answer 1

我找到了解决方案。我最终改变了我的 openDialog() 函数，有点像我在网上找到的这个例子。

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

结合上述所有内容进行此操作，效果很好。感谢团队！

Answer 2

您可以随时通过单击 F12 查看 html 和 css 来检查您的页面，看看它们是否有问题：
1-单击选择图标
2-然后单击您要检查的元素
3-你拥有与该元素相关的所有CSS

Answer 3

请将这两行添加到 styes.scss 中并检查

// styes.scss

@use '@angular/material' as mat;

@include mat.core();