如何在材料工具栏上有一个自定义的背景颜色？

Question

我为应用程序制作了一个带有背景颜色的定制主题：

@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黑客。我认为有角质的材料是为了保护我。

模板标记是：

<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

实现这一点有几种方法，在我将要向您展示的示例中，为button按钮组件使用另一个主题，您可以为任何材料组件(可变材料-成分-主题)使用另一个主题。

你还有其他选择：

• 定制角材料组件样式
• 用角材料的主题系统对你的定制组件进行主题化

这是工作示例stackblitz