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

Question

就像问题所说，我的对话框弹出屏幕底部，而不是中间。它也不会在点击时关闭，而是在我遇到逃生时关闭。页面的其余部分也没有被禁用或变灰，所以我可以将它们叠加起来（见下文）。

我基本上使用与示例

完全相同的代码

import {Component} from '@angular/core';
import {MdDialog, MdDialogRef} from '@angular/material';

@Component({
    selector: 'dialog-overview-example',
    template: '<button md-button (click)="openDialog()">Open dialog</button>'
})
export class DialogOverviewExample {
    constructor(public dialog: MdDialog) {}

    public openDialog(): void {
        this.dialog.open(BasicDialog);
    }
}

@Component({
    selector: 'dialog-overview-example-dialog',
    template: "<p> Hi, I'm a dialog! </p>",
})
export class BasicDialog {}

我认为我的导入是正确的，但它们是：

imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(ROUTES, {useHash: true}),
    MdDialogModule,
    BrowserAnimationsModule,
    ReactiveFormsModule,
    FormsModule,
    CommonModule
],

请注意，控制台中没有错误或警告，我尝试禁用css。

之前有人见过这个吗？

Answer 1

原来问题在于我是如何导入css的。以前我导入了一个scss文件：

@import '../../node_modules/@angular/material/prebuilt-themes/purple-green.css';

我确实导入了样式，这就是为什么我认为这已经足够了;显然，您需要在index.html中导入css：

<link href="https://unpkg.com/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">

就是这样。回想起来，它应该从一开始就很明显，但就像我说的那样，我认为它是正确导入的，因为样式实际上是导入的。此外，我尝试导入缩小版本，但也没有用。

Answer 2

问题不在于导入/包含角度材质主题。

要解决此问题，请在全局css中添加代码，如果使用cli，则添加到styles.css

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

Answer 3

我更喜欢在我的angular.json文件中使用此方法

"styles": [
              "src/styles/styles.less",             
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css"              
            ],

Answer 4

index.html中的

将以下链接添加到angular material

<link href="https://unpkg.com/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">