在最近举行的ng-kyoto Angular Meetup #3上，我进行了一个关于”CSS in JS 与 CSS Modules”的演讲。

尽管在 Angular Meetup 上，我本来打算通过关于 React 中组件样式的内容来煽动说“React社区正在努力，而 Angular 却……”，但在最后的 @armorik83 先生的演讲中得知 Angular 2 中将实现类似功能，因此我匆忙改写了结尾。

因此，在本文中，我們將看一下在Angular 2中如何實現組件的樣式，以及如何進行CSS的封裝（本地作用域化）。

前提 – Paraphrased option in Chinese: 起码条件

この記事を執筆した時点での Angular 2 の最新バージョンは 2.0.0-alpha.51 です。

演示应用程序

我在http://jmblog.github.io/angular2-styling-components-demo/上准备了一个用于演示的应用程序。

可以在jmblog/angular2-styling-components-demo找到完整的源代码。有兴趣的人可以fork并在自己的环境中进行实验。

组件的样式实现

在Angular 2中，实现组件的样式有三种方法可供选择。

1. 使用ViewMetadata的styles属性

1. 使用ViewMetadata的styleUrls属性

在模板中嵌入