https://www.styled-components.com

介紹撰寫React CSS的神套件Styled Components

Css-in-Js 跟傳統拆開CSS碼的兩種編寫方式其實在選擇上，應該是依造自己的需求來選擇，並沒說哪個好哪個不好，只能說各自都各自喜歡的人，今天要介紹的是在編寫react css的一套library，應該是我現在最喜歡的一種，會接觸到這套library主要是在用GatsbyJS在寫自己網站的時發現的，如果你在開發React的時候還不知道要怎麼去組織css的話可以使用看看。

Styled Components

styled components是React在編寫inline-css的library，應該還算新，感覺出來幾個月而已，它很特別的地方是它可以把你要用的元素透過 ES6 的字符串模板做出來，你不用再對每個類別或是HTML元素進行Styling，它能讓你編寫CSS也像是在做Component一樣，把每個CSS都進行組件化。

寫法介紹

一般寫法

//xxx.js
import "xxx.css"
return(
   <div className="container">Hello World</div>
)

//xxx.css
div.container{
 width: 100%;
 height: 100%;
 background: red;
}

Styled Components

import styled from 'styled-components';
const Contaner = styled.div`
 width: 100%;
 height: 100%;
 background: red;
`
return(
  <Container>Hello World</Container>
)

這種組件即是元素的方式能讓我們在編寫react元件時看起來更加簡潔，光是少了一堆html元素名稱跟className，就整個看起來簡單好維護。

參數傳遞

Styled Component一樣提供了passed props的功能，可以讓你寫一份css component然後用不同props去改變它的一些樣式。

看一下官網的範例

const Button = styled.button`
	/* Adapt the colours based on primary prop */
	background: ${props => props.primary ? 'palevioletred' :      
        'white'};
	color: ${props => props.primary ? 'white' : 
        'palevioletred'};

	font-size: 1em;
	margin: 1em;
	padding: 0.25em 1em;
	border: 2px solid palevioletred;
	border-radius: 3px;
`;
render(
	<div>
		<Button>Normal</Button>
		<Button primary>Primary</Button>
	</div>
);

你需要在你想改變的css屬性上寫一些判斷式，來判斷不同參數要改變什麼樣子的樣式。

Styled Components還有提供蠻多功能，像是動畫還有繼承元件等等，可以參考他們的DOCS，我喜歡這個套件的一個主因就是，就算你在編寫styled component遇到一些用法不習慣的地方，它一樣允許你用一般scss的方式來編寫你的css元件，幾乎不用擔心有不好上手的地方。

當然CSS in JS或是非CSS in JS的撰寫方式，好壞之處還是吵不完，像這篇文章Stop using CSS in JavaScript for web development就提出了幾個原因來說不要使用CSS in JS這種方式，所以目前為止還是看個人喜好就好。

想要了解Styled Component背後原理的可以參考這篇

The magic behind 💅 styled-components

其他參考資料

Styled Components: Enforcing Best Practices In Component-Based Systems

A 5-minute Intro to Styled Components

http://me.lizhooh.com/2017/07/13/React/Style/styled-components/