点击查看完整截图
这是我的代码:
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { MatCheckboxModule, MatInputModule, MatListModule, MatCardModule, MatButtonModule, MdDatepickerModule, MdNativeDateModule, MatIconModule, MatTabsModule } from '@angular/material';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { AppRoutes } from './app.routes';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
RouterModule.forRoot(AppRoutes),
BrowserAnimationsModule,
MatCheckboxModule,
MatInputModule,
MatCardModule,
MatButtonModule,
MdDatepickerModule,
MdNativeDateModule,
MatIconModule,
MatTabsModule,
MatListModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
这就是我使用它的方式:
login.component.html
:
<md-card>
<md-card-header>
<h2>Login</h2>
</md-card-header>
<md-card-content>
<div class="divInput">
<md-input-container>
<input mdInput type="text" placeholder="Login ID">
</md-input-container>
</div>
<div class="divInput">
<md-form-field>
<input mdInput type="password" placeholder="Password">
</md-form-field>
</div>
</md-card-content>
<md-card-actions>
<button md-button>LIKE</button>
</md-card-actions>
</md-card>
我错过了所需的一切吗?可能是因为我错过了一些必需的模块吗?
答案 0 :(得分:1)
我遇到了同样的问题,请将以下给定的import语句添加到style.css
中。这已经解决了我的问题。
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
我想这应该可以解决您的问题。