Angular Material 5 设置 fab 按钮默认颜色

Question

我正在使用 Anuglar Material (5.0.4)，我希望 mat-fab-button 默认背景颜色为白色，就像在 Angular examples 中一样。 .然而，出于某种原因，背景色是强调色。

HTML

<h2>Fab Buttons</h2>
<div>
  <button mat-fab>Basic</button>
  <button mat-fab color="primary">Primary</button>
  <button mat-fab color="accent">Accent</button>
  <button mat-fab color="warn">Warn</button>
  <button mat-fab disabled>Disabled</button>
  <button mat-fab>
    <mat-icon aria-label="Example icon-button with a whats hot icon">whatshot</mat-icon>
  </button>
  <a mat-fab routerLink=".">Link</a>
</div>

<h2>Mini Fab Buttons</h2>
<div>
  <button mat-mini-fab>Basic</button>
  <button mat-mini-fab color="primary">Primary</button>
  <button mat-mini-fab color="accent">Accent</button>
  <button mat-mini-fab color="warn">Warn</button>
  <button mat-mini-fab disabled>Disabled</button>
  <button mat-mini-fab>
    <mat-icon aria-label="Example icon-button with a whats hot icon">whatshot</mat-icon>
  </button>
  <a mat-mini-fab routerLink=".">Link</a>
</div>

主题

$deeporange-teal-amber-theme-primary: mat-palette($mat-deep-orange, 500, 100, 700);
$deeporange-teal-amber-theme-accent: mat-palette($mat-teal);
$deeporange-teal-amber-theme-warn: mat-palette($mat-amber);

$deeporange-teal-amber-theme: mat-light-theme(
  $deeporange-teal-amber-theme-primary,
  $deeporange-teal-amber-theme-accent,
  $deeporange-teal-amber-theme-warn);

奇怪的是 mat-raised-button 有白色背景。

Answer 1

在docs ，它说到主题:

By default, only FABs (Floating Action Button) are colored; the default background color for mat-button and mat-raised-button matches the theme's background color.

如果您在 stackblitz 上尝试示例代码您会看到没有 color 属性的 FAB 也是彩色的。 (我不知道为什么文档中嵌入示例的行为不同。)

如果您希望 FAB 为白色，只需将颜色属性留空即可:

<button mat-fab color="">Basic</button>