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

Question

我正在使用Anuglar材质（5.0.4），并且我希望mat-fab-button默认的背景颜色是白色，就像Angular示例中一样。但是对我来说，由于某种原因，背景色是强调色。

的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

在文档中，它说明了有关主题的内容：

默认情况下，仅FAB（浮动操作按钮）是彩色的。垫按钮和垫升高按钮的默认背景颜色与主题的背景颜色匹配。

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

如果希望FAB为白色，则将color属性保留为空：

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