css - 从主 SCSS 样式化 Angular 组件的元素

Question

我在 Angular 5.x 应用程序中遇到问题，希望有人能提供帮助...

我有一个组件有一个 mat-raised-button，目前我在组件的 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>

红色主题.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);
}

它编译并显示我的按钮，但按钮的边框没有颜色变化(即使其他 Material 组件在页面上改变了颜色)。谁能帮助我朝着正确的方向前进？

Answer 1

那些“啊!”之一片刻，但我想我会发布这个作为答案，以防万一有人偶然发现这篇文章......自定义组件混合是我此时此刻的方式。我希望我能弄清楚我必须自定义主题的所有其他元素。

我的第一个测试(在我的原始帖子中显示)不起作用的原因是我忘记添加行以在 styles.scss 中实际导入我的自定义组件主题:

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