Angular 2中的CSS主题

问题描述：

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

文件结构将是你最好的选择。这是人们大部分时间用来构建适用于生产的angular2应用程序的工具。 –

我同意，这就是为什么我使用它。但是CSS主题呢？ –

答

我们有几个办法样式添加到组件：

内嵌在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';

组件样式也有从阴影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 comnponents请结帐以下：

PrimeNG

Material

NG bootsrap

希望这有助于。

干杯！

我知道，那不是我问的。我问了关于CSS主题。你会如何在上面的例子中插入一个外部CSS主题？ –

对不起，我现在得到它，请看看更新的答案。 –

我的问题不是关于UI组件库。假设我想创建我自己的组件并添加主题。 –

答

Angular cli内置了对css预处理器的支持，如sass和less，这对于css主题非常有用。这个问题比较好解决，如果你专注于如何通过以下/上海社会科学院做主题则是如何做到这一点的角度

我会建议有你的根组件下面的根元素：

应用。 component.html

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

app.component。通过角CLI提供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中的所有主题呢？ –

Angular 2中的CSS主题

相关推荐