Angular 2 中的 CSS 主题

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

希望这对您有所帮助。

干杯!!