Angular 2 材质“输入”占位符不在焦点上浮动

Question

文本框中的占位符没有浮动在焦点上，如下面的屏幕截图所示。

_{点击查看完整截图}

这是我的代码：

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>

我是否缺少任何必需的东西？ 可能是因为我缺少一些必需的模块吗？

Answer 1

我遇到了同样的问题，将下面给定的导入语句添加到style.css 。 这已经解决了我的问题。

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

我想这应该可以解决您的问题。