styled-components

什麼是style-components?

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