任何想法为什么没有正确应用 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
最佳答案
来自@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
关于 Angular Material 样式未正确应用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53402137/