style-components是針對React寫的一套css in js框架，簡單來講就是在js中寫css。相對于與預處理器(sass、less)的好處是，css in js使用的是js語法，不用重新再學習新技術，也不會多一道編譯步驟。無疑會加快網頁速度。

1. 安裝

npm install --save style-components

2，在項目模塊中引入

3,基本用法如下：

注意：1，定義首字母 必須大寫

2，可以采用es6 模板字符串的形式

3，可以通過props的形式傳值 判斷true 進行樣式更改

4,內部包裹的元素 還是可以通過className的形式添加樣式

5. 標簽屬性

使用style-components，需要使用標簽屬性，如input 的placeholder，a標簽的href等，style-components提供了屬性attrs，如下：

4