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中，它说的是主题：

  

默认情况下，只有FAB（浮动操作按钮）被着色;该   mat-button和mat-raised-button匹配的默认背景颜色   主题的背景色。

如果您在stackblitz上试用示例代码，您会发现没有color属性的FAB也会被着色。 （我不知道为什么嵌入式示例在文档中的行为不同。）

如果您希望您的FAB为白色，只需将颜色属性留空：

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

Answer 2

您可以像这样<button style="background-color:firebrick" mat-fab>Sell</button>