我想创建一个带有默认样式 mat-button
的 mat-dialog
来关闭对话框。除了按钮缺少 Angular Material 应用的 Material Design 风格外,一切正常。
如何让样式显示出来?据我所知,我已经按要求导入了所有模块,并且 properly set up each part of Angular Material including the themes .
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 { }
最佳答案
新导入的模块需要添加到imports
:
import { MatButtonModule } from '@angular/material/button'
@NgModule{
...
imports: [
BrowserModule,
BrowserAnimationsModule,
MatCardModule,
MatDialogModule,
MatButtonModule
],
...
})
关于html - Angular 4 Material - mat-button 样式未应用于 mat-dialog 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47067153/