角度材质按钮与主题不匹配

Question

I just have installed Angular 10 with Angular Materials ng add @angular/material我刚刚安装了带有 Angular Materials 的 Angular 10 ng add @angular/material

There I choose the custom theme: Purple/Green在那里我选择自定义主题：紫色/绿色

Next step was to simply add a Toolbar, basically copy paste from googles site.下一步是简单地添加一个工具栏，基本上是从谷歌网站复制粘贴。 But I cannot arrange the buttons matching the theme.但是我无法安排与主题匹配的按钮。 I have no idea why it looks like this.我不知道为什么它看起来像这样。

how it should look它应该看起来如何

<mat-toolbar color="primary">
  <button mat-icon-button aria-label="Example icon-button with menu icon">
    <mat-icon>menu</mat-icon>
  </button>
  <span>My App</span>
  <span class="nav-spacer"></span>
  <button mat-icon-button class="material-icons-outlined" 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>

my stlye.css我的 stlye.css

/* You can add global styles to this file, and also import other style files */

html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

my index.html我的 index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Frontend</title>
  <base href="/">
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <link href="favicon.ico" rel="icon" type="image/x-icon">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body class="mat-typography">
<app-root></app-root>
</body>
</html>

and these imports而这些进口

  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    FormsModule,
    MatToolbarModule,
    MatIconModule,
  ],

What do I miss here please?请问我在这里想念什么？

Answer 1

您需要在导入中添加 MatButtonModule。

角度材质按钮与主题不匹配

问题描述

1 个解决方案

解决方案1
3 已采纳 2020-09-17 14:54:11

角度材质按钮与主题不匹配

问题描述

1 个解决方案

解决方案1 3 已采纳 2020-09-17 14:54:11

解决方案1
3 已采纳 2020-09-17 14:54:11