Элемент стайлинга углового компонента от основного SCSS

Question

Я борюсь с чем-то в своем приложении Angular 5.x и надеюсь, что кто-то может помочь ...

У меня есть компонент, у которого есть кнопка с поднятой циновкой, и в настоящее время я 'У нас есть некоторые стили для него в файле SCSS компонента:

button-themed {
background-color: black;
color: white;
border-color: red;
border-style: solid;
border-width: 1px;}

В таком случае все выглядит хорошо.Однако теперь я хочу перенести этот стиль на некоторые тематические файлы SCSS, над которыми я работаю.Как я могу применить стиль, если он находится в моих файлах "red-theme.scss" или "blue-theme.scss"?

(я ищу возможность динамически переключаться между темами икнопка для настройки в соответствии с темой)

ОБНОВЛЕНИЕ

Я пнул шины еще немного на заказной тематике, и никуда не деться.Что мне не хватает?Ниже приведены некоторые быстрые тестовые материалы, которые я собрал вместе (я просто пытаюсь заставить границу кнопки изменить цвет, чтобы я мог видеть, что процесс работает).

settings.component.scss:

.test-button {
    border-style: solid;
    border-width: 1px;
}

settings.theme.scss:

@mixin test-theme($theme) {
  $primary: map-get($theme, primary);
  $warn: map-get($theme, warn);
  .test-button {
    background-color: mat-color($primary);
    color: mat-color($warn);
    border-color: mat-color($warn);
  }
}

settings.component.html:

<button mat-raised-button class="test-button">TEST</button>

red-theme.scss:

$test-primary: mat-palette($mat-pink, 800, 300, 900);
$test-accent: mat-palette($mat-pink);
$test-warn: mat-palette($mat-indigo, 600);
$test-theme: mat-light-theme($test-primary, $test-accent, $test-warn);

стили.scss:

@import '~@angular/material/theming';
@import 'themes/color-palettes.scss';
@include mat-core();
@import 'app/pages/settings/settings.theme.scss';
@mixin custom-components-theme($theme) {
  @include test-theme($theme);
}
@import 'themes/red-theme.scss';
.red-theme {
  @include angular-material-theme($test-theme);
}

Он компилируется, и моя кнопка отображается, но цвет рамки кнопки не меняется (хотя другие компоненты материала изменили цвет на странице).Кто-нибудь может помочь подтолкнуть меня в правильном направлении?

Answer 1

Один из тех "Argh!" моменты, но я решил опубликовать это как ответ на тот случай, если кто-нибудь наткнется на это сообщение ... Миксин пользовательских компонентов - это то, что я делаю в данный момент. Я надеюсь, что смогу выяснить все остальные предметы, которые у меня будут в пользовательской теме.

Причина, по которой мой первый тест (показанный в моем первоначальном посте) не сработал, заключается в том, что я забыл добавить строку, чтобы фактически импортировать мою тему пользовательского компонента в styles.scss:

.red-theme {
  @include angular-material-theme($test-theme);
  @include custom-components-theme($test-theme);
}

Answer 2

Как насчет таких компонентов в ваших компонентах?

:host-context(.theme-light) p {
   background-color: white;
}
:host-context(.theme-dark) p {
   background-color: black;
}