Angular 6 - Material Text框浮动占位符不起作用

Question

我想使用Angular 6 Material UI组件来提供更高级的外观和感觉，我在测试程序下面运行，但matInput没有给出那种外观和感觉。参考：qazxsw poi代码：

https://material.angular.io/components/input/overview

我的package.json是

<form class="example-form">
  <md-form-field class="example-full-width">
    <input mdInput placeholder="Favorite food" value="Sushi">
  </md-form-field>

  <mat-form-field class="example-full-width">
    <textarea matInput placeholder="Leave a comment"></textarea>
  </mat-form-field>
</form>

输出：

{
  "name": "employee-management-system",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "6.1.7",
    "@angular/common": "6.1.7",
    "@angular/compiler": "6.1.7",
    "@angular/core": "6.1.7",
    "@angular/forms": "6.1.7",
    "@angular/http": "6.1.7",
    "@angular/platform-browser": "6.1.7",
    "@angular/platform-browser-dynamic": "6.1.7",
    "@angular/router": "6.1.7",
    "core-js": "2.5.7",
    "rxjs": "6.3.2",
    "zone.js": "0.8.26",
    "moment": "2.22.2",
    "hammerjs": "2.0.8",
    "@angular/cdk": "6.4.7",
    "@angular/material": "6.4.7",
    "web-animations-js": "2.3.1",
    "angular-in-memory-web-api": "0.5.4",
    "@angular/material-moment-adapter": "6.4.7"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^6.0.0",
    "@angular-devkit/build-angular": "~0.6.0",
    "typescript": "~2.7.2",
    "@angular/cli": "~6.0.0",
    "@angular/language-service": "^6.0.0",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~1.4.2",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1"
  }
}

Answer 1

您必须在角度材质应用程序中包含主题。您可以使用其中一个预先构建的主题，在place holder is not floating中添加：

styles.css

您可以为其他预建主题更改此主题：

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

或制作自己的主题。