Angular 2 中的 CSS 主题

Posted 2023-03-06

【中文标题】Angular 2 中的 CSS 主题

【英文标题】：CSS themes in Angular 2

【发布时间】：2017-03-29 11:51:25

【问题描述】：

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

【问题讨论】：

angular-cli 提供的文件结构将是你最好的选择。这是人们大多数时候用来构建生产就绪 angular2 应用程序的工具。

我同意，这就是我使用它的原因。但是 CSS 主题呢？

【参考方案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

希望这会有所帮助。

干杯！！

【讨论】：

我知道这不是我问的。我询问了 CSS 主题。您将如何在上面的示例中插入外部 CSS 主题？

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

如果您想创建自己的组件并添加主题，那么您可以编写自己的 css 文件并使用适当的主题，添加一个 sn-p 作为答案以显示如何使用主题，还添加了一个链接以了解有关组件样式的更多信息。

我知道怎么做，但最好的组织方式是什么？

这些都没有真正回应最初的问题。

【参考方案2】：

Angular cli 内置了对 css 预处理器的支持，例如 sass 和 less，它们非常适合 css 主题。如果您专注于如何通过 less/sass 制作主题然后如何在 angular 中制作主题，这个问题会得到更好的解决

我会建议在您的根元素上为您的根组件使用以下内容：

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

【讨论】：

我知道如何在 Sass 中进行主题化。我的问题是在 Angular 2 中是否有一种标准的方式来组织主题/主题文件。我怀疑没有。你的想法很不错，但如果我不想在 CSS 中加载所有主题怎么办？