Angular 4 Material - mat-button样式未应用于mat-dialog组件

Question

我想创建一个mat-dialog默认样式mat-button来关闭对话框.一切正常,但按钮缺少Angular Material应用的Material Design样式.

我如何获得展示的风格？AFAIK我根据需要导入了所有模块,并正确设置了Angular Material的每个部分,包括主题.

my-dialog.component.ts:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-my-dialog',
  templateUrl: './my-dialog.component.html',
  styleUrls: ['./my-dialog.component.css']
})
export class MyDialogComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

my-dialog.component.html:

<h1 mat-dialog-title>Lorem Ipsum</h1>
<div mat-dialog-content>
  ...
</div>
<button mat-button mat-dialog-close>Close</button>

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatCardModule, MatDialogModule, MatButtonModule } from '@angular/material'

import { AppComponent } from './app.component';
import { MyDialogComponent } from './my-dialog/my-dialog.component';

@NgModule({
  declarations: [
    AppComponent,
    MyDialogComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatCardModule,
    MatDialogModule 
  ],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [
    MyDialogComponent
  ]
})
export class AppModule { }

Answer 1

值得注意的是，新的 angular 9 构建系统要求您在添加材料模块后停止“ng serve”脚本并再次运行它

Answer 2

需要将新导入的模块添加到imports:

@NgModule{
  ...
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatCardModule,
    MatDialogModule,
    MatButtonModule
  ],
  ...
})

Answer 3

styles.css 中也可能缺少一行

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

Answer 4

TL;DR
如果您有其他工作但不是特定组件，请确保组件的模块已导入并正确导入，因为模块必须添加到imports：

@NgModule{
  imports: [
    MatCardModule,
    MatButtonModule
  ]
})

说明：
我遇到了同样的问题，我有一个CustomMaterialModule，我在其中导入了我需要在我的应用程序中使用的所有材料模块。我正在使用 mat-button 但它的样式不存在。经过几分钟的搜索，我发现我只将 MatButtonModule 放在我的CustomMaterialModule 的导入数组中，而不是放在导出数组中。

注意：我的 CustomMaterialModule 在我的应用程序中承载了我需要的所有材料模块，因此像 MatButtonModule 这样的模块将进入我的 CustomMaterialModule 导入和导出数组，然后我只会在我的应用程序的其他地方使用我的 CustomMaterialModule。我这样做是为了保持代码干净且易于编辑。因此，例如，如果一个月后我不需要材料模块，我可以将它从我的 CustomMaterialModule 中删除而不必担心。