如何在材质工具栏上自定义背景颜色

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黑客攻击。我认为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

有几种方法可以实现这一点，在我将向您展示的示例中，为材质按钮组件使用替代主题，您可以为任何材质组件使用替代专题(可变材质组件专题(。

你有其他选择：

• 自定义角度材质组件样式
• 使用Angular Material的专题系统为自定义零部件专题

这是stackblitz 的工作示例

Answer 2

如果有人在使用较新的角度版本时遇到这个问题，Stephane为我调整的解决方案是：

$background: map-get(map-get($my-theme, color), background);
$bg-color: #FFF;
$background: map_merge($background, (background: $bg-color, app-bar: 
$bg-color, status-bar: $bg-color));
$color-of-theme: map_merge(map-get($my-theme, color), (background: $background));
$my-theme: map_merge($my-theme, (color: $color-of-theme));

样式现在保存在"；颜色"；主题映射AND中的字段也直接复制到映射中(显然是遗留支持所必需的，但imho这是非常混乱和糟糕的设计(。就我的情况而言，我必须设置"；颜色"；字段值，上面的代码就是这样做的。在初始化主题之后调用代码，例如my-$theme: mat.define-light-theme((color:(primary:$primary-palette,accent: ....)));->更多信息。