一步步跟着有棱角的材料，但形状看起来不像材料，为什么？答案

【问题标题】：followed angular material step by step but form does not look material, why?一步步跟着有棱角的材料，但形状看起来不像材料，为什么？
【发布时间】：2018-03-10 16:44:25
【问题描述】：

我是角度新手，我有一个新的 angular 4 应用程序，然后我按照以下步骤逐步安装：https://material.angular.io/guide/getting-started。

然后我将代码从这里复制到我的新组件中： https://material.angular.io/components/input/examples

我明白了：

https://ibb.co/ihb41G

而不是预期：

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

https://ibb.co/bBA8Tw

任何想法我做错了什么？或者要检查什么来验证它？

src/app/components/inputform/inputform.component.html:

<form class="example-form">
  <md-form-field class="example-full-width">
    <input mdInput placeholder="Company (disabled)" disabled value="Google">
  </md-form-field>

  <table class="example-full-width" cellspacing="0"><tr>
    <td><md-form-field class="example-full-width">
      <input mdInput placeholder="First name">
    </md-form-field></td>
    <td><md-form-field class="example-full-width">
      <input mdInput placeholder="Long Last Name That Will Be Truncated">
    </md-form-field></td>
  </tr></table>

  <p>
    <md-form-field class="example-full-width">
      <textarea mdInput placeholder="Address">1600 Amphitheatre Pkwy</textarea>
    </md-form-field>
    <md-form-field class="example-full-width">
      <textarea mdInput placeholder="Address 2"></textarea>
    </md-form-field>
  </p>

  <table class="example-full-width" cellspacing="0"><tr>
    <td><md-form-field class="example-full-width">
      <input mdInput placeholder="City">
    </md-form-field></td>
    <td><md-form-field class="example-full-width">
      <input mdInput placeholder="State">
    </md-form-field></td>
    <td><md-form-field class="example-full-width">
      <input mdInput #postalCode maxlength="5" placeholder="Postal Code" value="94043">
      <md-hint align="end">{{postalCode.value.length}} / 5</md-hint>
    </md-form-field></td>
  </tr></table>
</form>

src/app/components/inputform/inputform.component.css：

.example-form {
  min-width: 150px;
  max-width: 500px;
  width: 100%;
}

.example-full-width {
  width: 100%;
}

src/app/components/inputform/inputform.component.ts:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-inputform',
  templateUrl: './inputform.component.html',
  styleUrls: ['./inputform.component.css']
})
export class InputformComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

正在运行：

npm install --save @angular/material @angular/cdk
npm install --save @angular/animations

其他文件：

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MdButtonModule, MdCheckboxModule} from '@angular/material';

import { AppComponent } from './app.component';
import { InputformComponent } from './components/inputform/inputform.component';

@NgModule({
  declarations: [
    AppComponent,
    InputformComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MdButtonModule, MdCheckboxModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

src/index.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Quickwebsite</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
  <app-root></app-root>
</body>
</html>

src/styles.css:

/* You can add global styles to this file, and also import other style files */
@import "~@angular/material/prebuilt-themes/indigo-pink.css";

src/app/app.component.html:

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{title}}!
  </h1>
  <img width="300" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <app-inputform></app-inputform>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>

src/app/app.component.ts:

import { Component } from '@angular/core';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MdButtonModule, MdCheckboxModule} from '@angular/material';

import { AppComponent } from './app.component';
import { InputformComponent } from './components/inputform/inputform.component';

@NgModule({
  declarations: [
    AppComponent,
    InputformComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MdButtonModule, MdCheckboxModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

【问题讨论】：

你需要包含材料主题
@Faisal 我在问题中更新了我的所有代码，从这段代码中是否意味着我添加了材料主题？谢谢。

标签： angular angular-material angular-material2

【解决方案1】：

作为https://material.angular.io/guide/theming 的表单，您似乎错过了：

@import '~@angular/material/theming';
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue.
$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);

// The warn palette is optional (defaults to red).
$candy-app-warn:    mat-palette($mat-red);

// Create the theme object (a Sass map containing all of the palettes).
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($candy-app-theme);

创建一个文件夹theme，并将应用主题放入yourthemename.scss等文件中

将其导入到styles.scss，例如@import '/app/theme/yourthemename';

【讨论】：

但是我在styles.css中使用了他们的主题我有`@import "~@angular/material/prebuilt-themes/indigo-pink.css";
@Jas 你能在线复制你的问题还是把它推送到 github 上？