如何在 material 工具栏上设置自定义背景颜色？

Question

我有 an app 我为其制作了一个带有背景颜色的自定义主题：

@import '~@angular/material/theming';

@include mat-core();

$custom-theme-primary: mat-palette($mat-lime);
$custom-theme-accent: mat-palette($mat-orange, A200, A100, A400);
$custom-theme-warn: mat-palette($mat-red);

$custom-theme: mat-light-theme($custom-theme-primary, $custom-theme-accent, $custom-theme-warn);

$custom-background-color: map_get($mat-grey, 0);
$background: map-get($custom-theme, 'background');
$background: map_merge($background, ('background': $custom-background-color));
$custom-theme: map_merge($custom-theme, ('background': $background));

@include angular-material-theme($custom-theme);

现在，我正在尝试让包含右侧按钮的 mat-toolbar 具有与 mat-card 背景色相同的白色。

但工具栏背景仍然是灰色。

我希望我可以没有包含此按钮的工具栏，但这是我发现它正确对齐的方式。

我确信有一些 CSS 方法可以实现这一点，但我不想深入研究 CSS 黑客攻击。我觉得Angular Material是来保护我的

模板标记为：

<mat-card>
  <mat-card-content>
    <mat-toolbar color="background">
      <span class="fill-remaining-space"></span>
      <button mat-fab color="accent" (click)="generateSoundtrack()">
        <mat-icon mat-icon>add</mat-icon>
      </button>
    </mat-toolbar>
  </mat-card-content>
</mat-card>

模板的 CSS 文件伴侣：

.fill-remaining-space {
  flex: 1 1 auto;
}

.soundtrack-action {
  padding-left: 30px;
}

.soundtrack {
  padding-bottom: 50px;
}

mat-icon {
  cursor: pointer;
}

更新：我可以通过以下主题配置解决背景颜色不同的问题：

// Applying a custom theme
$palette-primary: mat-palette($mat-lime);
$palette-accent: mat-palette($mat-orange);
$palette-warn: mat-palette($mat-red);
$standard-light-theme: mat-light-theme($palette-primary, $palette-accent, $palette-warn);
@include angular-material-theme($standard-light-theme);

// Changing some palette properties of a theme and applying it to a component
$background: map-get($standard-light-theme, background);
$bg-color: #FFFFFF;
$background: map_merge($background, (background: $bg-color, app-bar: $bg-color));
$custom-light-theme: map_merge($standard-light-theme, (background: $background));
@include mat-toolbar-theme($custom-light-theme);

Answer 1

有几种方法可以实现这一点，在我要向您展示的示例中，为 material 按钮组件使用替代主题，您可以为任何 material 组件 (altertive-material-component-theme).

您还有其他选择：

这是工作示例stackblitz

如何在 material 工具栏上设置自定义背景颜色？

How to have a custom background colour on a material toolbar?

material-design

angular-material

angular