У меня приложение , для которого я создал собственную тему с цветом фона:
@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 с правой рукой кнопка имеет тот же белый sh цвет, что и mat-card цвет фона.
Но фон панели инструментов остается серым.
I * sh Я мог бы обойтись без панели инструментов, содержащей это Кнопка, но я обнаружил, что она выровнена правильно.
Я уверен, что есть несколько способов CSS, чтобы достичь этого, но я предпочитаю не погружаться в CSS взлом. Я считаю Angular Материал для защиты.
Разметка шаблона:
<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);