Angular 材质组件在添加到空白 Angular 应用程序时看起来与示例中不同答案

【问题标题】：Angular material component looks different when added to a blank angular app than it does on the exampleAngular 材质组件在添加到空白 Angular 应用程序时看起来与示例中不同
【发布时间】：2020-09-10 21:58:35
【问题描述】：

我将 Angular Material 组件“工具栏”添加到我的项目中，但它看起来与示例中的不同，尽管据我所知，所有样式都是相同的。

这是项目网站示例中的样子。

出于调试目的，我创建了一个空白的 Angular 应用程序并添加了 Angular Material 和工具栏组件，它看起来就像在我的实际项目中一样，就像这样。调试Angular应用here

这是 html 和 css 示例，可以按照我的要求工作：我已将其复制到 stackblitz here

index.html

<link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block" rel="stylesheet">
<div class="mat-app-background basic-container">
  <toolbar-basic-example>loading</toolbar-basic-example>
</div>
<span class="version-info">Current build: 10.2.0</span>

组件html

<mat-toolbar>
  <button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon">
    <mat-icon>menu</mat-icon>
  </button>
  <span>My App</span>
  <span class="example-spacer"></span>
  <button mat-icon-button class="example-icon favorite-icon" aria-label="Example icon-button with heart icon">
    <mat-icon>favorite</mat-icon>
  </button>
  <button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon">
    <mat-icon>share</mat-icon>
  </button>
</mat-toolbar>

style.scss

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

body {
  font-family: Roboto, Arial, sans-serif;
  margin: 0;
}
.basic-container {
  padding: 30px;
}

组件 css

.example-spacer {
  flex: 1 1 auto;
}

这是我的调试 Angular 应用程序，我希望它看起来与示例相同，并复制到 stackblitz here

index.html

<!doctype html>
<html lang="en">
<head>
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block" rel="stylesheet">
</head>
<body class="mat-typography">
  <div class="mat-app-background basic-container">    
  <app-root></app-root>
  </div>
</body>
</html>

组件html

<mat-toolbar>
  <button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon">
    <mat-icon>menu</mat-icon>
  </button>
  <span>My App</span>
  <span class="example-spacer"></span>
  <button mat-icon-button class="example-icon favorite-icon" aria-label="Example icon-button with heart icon">
    <mat-icon>favorite</mat-icon>
  </button>
  <button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon">
    <mat-icon>share</mat-icon>
  </button>
</mat-toolbar>

styles.scss

@import '~@angular/material/prebuilt-themes/indigo-pink.css';
body {
  font-family: Roboto, Arial, sans-serif;
  margin: 0;
}
.basic-container {
  padding: 30px;
}

组件scss

.example-spacer {
  flex: 1 1 auto;
}

为什么我的 Angular 应用看起来不像 Angular Material 网站上的示例，我该如何纠正它。

【问题讨论】：

标签： css angular sass angular-material

【解决方案1】：

您没有导入MatButtonModule，因此mat-icon-button 指令什么也不做。

这是一个更新后的 app.module.ts 导入

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatIconModule} from '@angular/material/icon';

import {MatButtonModule} from '@angular/material/button';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MatToolbarModule,
    MatIconModule,

    // you were missing this
    MatButtonModule,

    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

工作堆栈闪电战：https://stackblitz.com/edit/github-9eywwc-xsjtpo?file=src/app/app.module.ts

【讨论】：