首页 文章

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

提问于
浏览 次
0

我在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”文件中应用样式？

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

UPDATE

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

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

它会编译并显示我的按钮，但按钮的边框没有颜色变化（即使其他材质组件在页面上更改了颜色） . 任何人都可以帮助推动我朝着正确的方向前进吗？

css angular sass angular-material

2 回答

  • 0

    你的组件中有这样的东西怎么样？

    :host-context(.theme-light) p {
   background-color: white;
}
:host-context(.theme-dark) p {
   background-color: black;
}
    回复于
  • 0

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

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

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

相关问题