Как применить тему Angular Material к нематериальным компонентам? - PullRequest
Новая
       18

Как применить тему Angular Material к нематериальным компонентам?

0 голосов
/ 02 мая 2018

Я использую темы Angular Material 2 для своего приложения Angular 4. У меня есть следующие темы, созданные в моей theme.scss 

@import '~@angular/material/theming';
@include mat-core();

$primary-color: mat-palette($mat-grey);
$accent-color: mat-palette($mat-blue, 500, 900, A100);
$warning-color: mat-palette($mat-red);

$dark-theme: mat-dark-theme($primary-color, $accent-color, $warning-color);
$light-theme: mat-light-theme($primary-color, $accent-color, $warning-color);

И в моем style.scss у меня есть следующее 

@import 'theme.scss';

.dark-theme {
    @include angular-material-theme($dark-theme);
}

.light-theme {
    @include angular-material-theme($light-theme);
}

В моем HTML я жестко закодировал темную тему (в конце концов я хочу дать пользователю возможность выбрать одну из двух темных или светлых) 

<body class="dark-theme">
    <app-root></app-root>
</body>

Но когда я запускаю приложение, я не вижу темных цветов, которые ожидал увидеть. Например, если я проверяю элемент body, я не вижу никаких стилей, настроенных на него. Или, если я добавлю элемент h1, для него не будет установлено ни одного стиля. Я ожидал, что все элементы внутри моего тега body будут соответствовать цветам темы. Разве это не так? Должен ли я явно указать, какие цвета должны быть у моих нематовых элементов?

Я не думаю, что начальная загрузка была неправильной. Потому что, когда я использую компоненты mat, как показано ниже, тема применяется для этого компонента, но общий фон все еще не установлен и, следовательно, белый. 

<mat-drawer-container class="example-container">
    <mat-drawer mode="side" opened="true">{{title}}</mat-drawer>
    <mat-drawer-content>Main content</mat-drawer-content>
</mat-drawer-container>

Кроме того, что если я хотел бы применить цвет, отличающийся от используемой палитры, кроме основного, акцентного или предупреждающего цветов? Как мне установить и использовать их?

Я абсолютно новичок в этой концепции и только сейчас начал понимать, что делает приведенный выше код. Любая помощь с благодарностью.

1 Ответ

0 голосов
/ 21 апреля 2019

Я думаю, это то, чего вам не хватает:

Наконец, если содержимое вашего приложения не помещено в элемент mat-sidenav-container, вам необходимо добавить класс mat-app-background к вашему элементу-обертке (например, body). Это гарантирует, что правильный фон темы будет применен к вашей странице.

источник

Если вы хотите применить другие цвета из палитры, вы можете использовать миксины, как описано в этом руководстве

...