Angular Material 样式未正确应用

Question

知道 angular material 样式未正确应用的原因吗？

我知道有很多关于此的问题，但我似乎找不到可以解决我的问题的问题。我已经在几个项目中使用 angular material 没有问题，但似乎无法弄清楚这里发生了什么。
我可能忽略了一些简单但看不到的东西。我刚刚升级到 angular 7，所以它可能与此有关。

这是我的对话框，它仅以奇怪或没有样式显示在父页面中。它正在做一些事情，因为与取消按钮相比，按钮略有变化，如您所见。

<div>
  <h4 mat-dialog-title>New Course Item</h4>
</div>
<div mat-dialog-content>
    <div>
        <div>
          <mat-form-field>
              <mat-label>Title</mat-label>
              <input type="text" [(ngModel)]="newCourseItem.title" #title="ngModel" matInput required placeholder="Title" name="title"/>
              <mat-error *ngIf="title.hasError('required')">This field is required</mat-error>
          </mat-form-field>
        </div>
        <div>
          <button (click)="this.dialogRef.close()">Cancel</button>
          <button mat-raised-button color="primary" [mat-dialog-close]="newCourseItem" cdkFocusInitial>Add New</button>
        </div>
      </div>
</div>

import { CourseItem } from './../../../../models/course-item';
import { Component, OnInit, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';

@Component({
  selector: 'app-new-course-item-dialog',
  templateUrl: './new-course-item-dialog.component.html',
  styleUrls: ['./new-course-item-dialog.component.css']
})
export class NewCourseItemDialogComponent implements OnInit {
  newCourseItem: CourseItem = new CourseItem();

  constructor(public dialogRef: MatDialogRef<NewCourseItemDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any) { }

  ngOnInit() {
  }

}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

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

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    CourseAdminComponent,
    NewCourseItemDialogComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,
    MatDialogModule,
    BrowserAnimationsModule,
    MatButtonModule,
    MatInputModule,
    MatFormFieldModule
  ],
  providers: [
    AuthService,
    DataService
  ],
  bootstrap: [AppComponent],
  entryComponents: [
    NewCourseItemDialogComponent
  ]
})
export class AppModule { }


Angular CLI: 7.0.5
Node: 10.7.0
OS: win32 x64
Angular: 7.0.4
... animations, cdk, common, core, material

Package                             Version
-------------------------------------------------------------
@angular-devkit/architect           0.10.5
@angular-devkit/build-angular       0.10.5
@angular-devkit/build-optimizer     0.10.5
@angular-devkit/build-webpack       0.10.5
@angular-devkit/core                7.0.5
@angular-devkit/schematics          7.0.5
@angular/cli                        7.0.5
@angular/compiler                   7.0.3
@angular/compiler-cli               7.0.3
@angular/flex-layout                7.0.0-beta.19
@angular/forms                      7.0.3
@angular/http                       7.0.3
@angular/language-service           7.0.3
@angular/platform-browser           7.0.3
@angular/platform-browser-dynamic   7.0.3
@angular/router                     7.0.3
@ngtools/webpack                    7.0.5
@schematics/angular                 7.0.5
@schematics/update                  0.10.5
rxjs                                6.3.3
typescript                          3.1.6
webpack                             4.19.1

Answer 1

@user18994 和@SiddAjmera 的评论回答了这个问题。

Step 4: Include a theme

Including a theme is required to apply all of the core and theme styles to your application.

To get started with a prebuilt theme, include one of Angular Material's prebuilt themes globally in your application. If you're using the Angular CLI, you can add this to your styles.css:

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

If you are not using the Angular CLI, you can include a prebuilt theme via a element in your index.html.

For more information on theming and instructions on how to create a custom theme, see the theming guide.

来源： https://material.angular.io/guide/getting-started

Answer 2

我遇到了样式问题，在我的情况下，只需应用 color="primary" 并更改代码就可以解决问题

来自：

<button mat-button [mat-dialog-close]="true">Delete</button>

至：

<button mat-button color="primary" [mat-dialog-close]="true">Delete</button>

我希望它能帮助人们节省时间！ :)

Answer 3

有时 app.module.ts 中缺少导入会导致此问题。确保您已经导入了您在 HTML.

中使用的所有模块

根据最新的 angular material 文档，您必须从其各自的包中导入模块而不是 @angular/material/

所以不用

import { MatToolbarModule , MatButtonModule, MatIconModule} from '@angular/material';

你必须导入 like

import { MatToolbarModule } from '@angular/material/toolbar';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';

Answer 4

在 Angular11 中，我必须在每个 ts 文件中导入模块才能使我的样式正确。我在 another answer.

中发布了更多详细信息

Angular Material 样式未正确应用

Angular Material styles not being applied correctly

angular-material

angular

angular7