使用@angular/material的MatDialog弹出时位置不正确的原因及解决办法

1、安装angular-material

在使用angular-material的时候，执行完npm i @angular/material@your-version后，会报缺少CDK的错误，这时需要执行：npm i @angular/cdk@your-version，版本要与@angular/core等的版本对应。

在app.component.scss中，引入 Material 主题，具体参数请自行配置：

@import '~@angular/material/theming';
@include mat-core();

$my-app-primary: mat-palette($mat-indigo);
$my-app-accent: mat-palette($mat-pink, A200, A100, A400); // color, default, light, dark
$my-app-warn: mat-palette($mat-red);

$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);

@include angular-material-theme($my-app-theme);

$my-dark-primary: mat-palette($mat-blue-grey);
$my-dark-accent: mat-palette($mat-amber, A200, A100, A400); // color, default, light, dark
$my-dark-warn: mat-palette($mat-deep-orange);

$my-dark-theme: mat-dark-theme($my-dark-primary, $my-dark-accent, $my-dark-warn);

.myapp-dark-theme {
  @include angular-material-theme($my-dark-theme);
}


.modal-backdrop .fade {
  opacity: 0.3 !important;
}

.modal .fade {
  opacity: 1 !important;
}

2、解决使用MatDialog时，弹出框位置不正确的问题

只需在styles.scss的头部添加如下语句即可：

@import "~@angular/cdk/overlay-prebuilt.css";