Question

我在Angular 5.x应用程序中遇到困难，并希望有人可以提供帮助......

我有一个带有垫子凸起按钮的组件，目前我在组件的SCSS文件中有一些样式：

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

一切看起来都很好。但是，我现在想要将该样式转换为我正在处理的一些主题SCSS文件。如何在我的＆＃34; red-theme.scss＆＃34;中使用样式。或＆＃34; blue-theme.scss＆＃34;文件？

（我希望能够在主题之间动态切换，并希望按钮根据主题进行调整）

更新

我在自定义主题上踢了更多的轮胎，而且无处可去。我错过了什么？下面是我一起扔的一些快速测试内容（我只是试图让按钮边框改变颜色，以便我看到这个过程有效）。

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>

红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);

styles.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

其中一个“唉！”时刻，但我想我会发布这个作为答案，万一有人偶然发现这个帖子...自定义组件mixin是我现在的方式。我希望我可以找出所有其他项目，我将有自定义主题。

我的第一次测试（在我的原始帖子中显示）不起作用的原因是因为我忘记添加该行以在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;
}

从主SCSS设置角度组件元素的样式

2 个答案: