Угловой 6,7 Как применить цвет темы по умолчанию к mat-sidenav фону?

Question

Я надеюсь, что фон mat-sidenav будет таким же, как мой mat-toolbar - цвет темы.

В src\styles.scss У меня есть:

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

Мой шаблон / HTML-файл имеет:

<mat-toolbar color="primary">
    <button mat-icon-button (click)="sidenav.toggle()">
        <mat-icon>menu</mat-icon>
    </button>
    Title text
</mat-toolbar>

Это хорошо видно в виде строки меню цвета индиго со значком menu и Title text. Ниже я хочу mat-sidenav (который будет иметь пункты меню), и я ожидаю, что весь фон области mat-sidenav будет иметь тот же цвет, что и:

<mat-toolbar color="primary">

индиго - определяется темой.

HTML-код продолжает отображаться mat-sidenav:

<mat-sidenav-container>
    <mat-sidenav #sidenav mode="side" opened>
        <app-vertical-menu></app-vertical-menu>  // renders the menu items
    </mat-sidenav>
    <mat-sidenav-content>
        <div class="app-main-area">
            <router-outlet></router-outlet>
        </div>
    </mat-sidenav-content>
</mat-sidenav-container>

Фон и цвета mat-sidenav не затрагиваются примененной темой, а его фоновые цвета пусты.

Я знаю, что могу создать стиль фона mat-sidenav внутри компонента, используя имя класса в шаблоне - например:

...
<mat-sidenav #sidenav2 mode="side" opened class="vertical-menu">
...

и в файле style / scss:

.vertical-menu {
    background-color: navy !important;
}

Но вместо этого я хочу применить цвет темы к теме по умолчанию (например, indigo-pink.css), поэтому цвет фона mat-sidenav такой же, как и у темы, которую мы используем для получения цвета панели инструментов

Answer 1

Вам необходимо применить пользовательскую тему к вашему компоненту. Подведем итог:

1. Определите свою тему в style.scss
2. Определить тему компонента , отл. my-component.component.scss-theme.scss. Это может отличаться от my-component.component.scss. Вы можете выделить темы (цвет и типографика) в файле темы, а другие вещи (размеры, положение и т. Д.) В файле, не относящемся к теме.
3. Включить и вызвать тему компонента в style.scss

Я создал образец приложения на Stackblitz . Как вы видите, mat-sidenav и mat-toolbar имеют одну и ту же тему. Вы можете попробовать, задав color=primary|accent|warn mat-toolbar и mat-sidenav

Томас Траян написал очень хороший средний блог на Полное руководство по темам угловых материалов . Вы можете найти документ команды Angular на Тематические компоненты .