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';

我想這應該可以解決您的問題。