css - 在angular2中实现主题

Question

我正在尝试在 Angular2 元素中实现主题。

当有人更改 web 应用程序的主题时，它会使用 javascript 更改主体类。应用程序中的每个组件都有与每个主题相关的颜色。

有人可以建议我如何在 Angular2 组件中执行此操作。

当我使用

编写组件样式表时

body.theme-1 .header {
   background-color: red;
}

它不起作用。

任何其他方式来实现它。

如果我从组件样式表中剪切相同的 css 并将其放入 index.html 或通用样式表中，它就可以工作。但它是一个巨大的应用程序，我不想将所有组件样式都写到一个地方。不可管理。

Answer 1

如果您在组件中声明 ViewEncapsulation.none，则该组件的样式将全局应用于您的应用程序。

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'style-test',
  template: `<div> Global stylesheet</div>`,
  styles: ['body {
                  background: blue;
                 }'],
  encapsulation: ViewEncapsulation.None // Use to 
                                       //disable CSS 
                                      //Encapsulation 
                                     //for this component
})
export class SecondComponent {
  constructor() { }
}