# styled-components
###### tags: `Library` `CSS-In-JS`
### 起手式

// 安裝
npm install --save styled-components

// 引入
import styled from 'styled-components';

### class 亂碼問題
> 如果沒有額外處理 styled-components ，在瀏覽器提供的開發者工具，會看到每個元件的 class 名稱都會是自動生成的亂碼（這樣怎麼 debug 啦 🥺）
##### `babel-plugin-styled-components`
使用 Babel 提供的 styled-components 套件，能毫不費力的看到 component 的名稱還有他的 styled 標籤名稱啦！（不過最後面還是會接亂碼有點礙眼就是了🤣）
- 安裝套件 [官方文件](https://styled-components.com/docs/tooling#babel-plugin)

npm install --save-dev babel-plugin-styled-components

- 設定 Babel config （.babelrc）

{
  "plugins": ["babel-plugin-styled-components"]
}

##### `babel-plugin-macros`
如果你的專案是使用 create-react-app 可以改為安裝較為輕量的 marco，就可以不用設定 Babel 的 config ，也能解決 class 的亂數問題 😌
- 安裝套件 [官方文件](https://styled-components.com/docs/tooling#babel-macro)

npm install --save-dev babel-plugin-macros

- 引入 styled-component 時，改為 styled-components/macro。

// 原本的
import styled from 'styled-components';

// 請改成
import styled from 'styled-components/macro';