Question

为Angular 2应用程序实现可插入CSS主题的最佳方法是什么？什么是推荐的文件结构？目前我正在使用angular-cli生成的那个。

Answer 1

我们有几种方法可以为组件添加样式：

内联于模板HTML
通过设置样式或styleUrls元数据
使用CSS导入

内联样式：

@Component({
  templateUrl: 'test.html',
  styles: [`
    .card {
      height: 20px;
      width: 80px;
    }
  `],
})

使用外部样式表：

@Component({
  styleUrls: ['css/mystyle.css'],
  templateUrl: 'test.html',
})

CSS导入：

@import 'hero-details-box.css';

组件样式也有来自shadow DOM样式范围的特殊选择器。例如可能有一个CSS主题类应用于该文档：

:host-context(.theme-light) h2 {
  background-color: #eef;
}

通常的做法是将组件的代码，HTML和CSS分成同一目录中的三个单独文件：

quest-summary.component.ts
quest-summary.component.html
quest-summary.component.css

请访问Component styles了解详情。

如果您想进一步增强它并使用SAS，请访问ANGULAR2 SASS了解更多详情。

styleUrls: ['./sassexample.component.scss']

如果您想使用用于UI组件的库，请查看以下内容：

PrimeNG

Material

NG bootsrap

希望这有帮助。

干杯!!

Answer 2

Angular cli内置支持css预处理器，如sass和less，这对css主题非常有用。如果您专注于如何通过less / sass创建主题然后如何在角度

中进行操作，则可以更好地解决此问题

我建议您的根元素具有以下根元素：

<强> app.component.html

<div [ngClass]="theme">
   <div class="widget">TEST</div>
</div>

<强> app.component.ts

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss'],
    encapsulation: ViewEncapsulation.None // this allows parent styles to influence children
})
export class AppComponent implements OnInit {
    public theme: string;

    constructor() {}

    public ngOnInit(): void {
        this.theme = ... some logic to set theme here ...
    }
}

<强> app.component.scss

.theme1 {
     .widget {
        background-color: red;
     }
}

.theme2 {
     .widget {
        background-color: blue;
     }
}

This is just a simple example, A quick google reveals many in depth guides on how do to theming in sass

Angular 2中的CSS主题

2 个答案: