Styled Components是在現代JavaScript中使用CSS的新方法之一。它被認為是CSS模組化的接班人，是一種將CSS寫在單個元件中並且不會泄漏到頁面中其他元素的方式。
簡要歷史
從前，網站非常簡單且沒有CSS存在。我們使用表格和框架來佈局網頁。這真是美好的時光。
然後CSS誕生了，過了一段時間後，人們開始意識到框架可以很好地幫助佈局和設計網頁，其中Bootstrap和Foundation在其中扮演了重要的角色。
預處理器（如SASS）在減慢框架的採用和更好地組織代碼方面起到了很大的幫助，特別是在團隊中，像BEM和SMACSS等約定也逐漸被廣泛使用。
然而約定並不是萬能的解決方案，而且很難記住，所以在過去幾年中，隨著每個前端項目都普遍採用JavaScript和構建流程，CSS也進入了JavaScript的領域（CSS-in-JS）。
新的工具不斷探索CSS-in-JS的新方法，其中一些工具變得非常受歡迎，比如：
- React Style
- jsxstyle
- Radium 等等。
介紹Styled Components
這些工具中最受歡迎的之一就是Styled Components。
它意圖成為CSS模組的後繼者，是一種在單個元件中撰寫僅適用於該元件的CSS而不會泄漏到頁面中其他元素的方式。
安裝
使用npm或yarn安裝styled-components：
npm install styled-components
yarn add styled-components
只要進行了安裝，你只需要添加這個import語句：
import styled from 'styled-components'
你的第一個樣式化元件
在導入styled物件後，你就可以開始創建樣式化元件。這是你的第一個樣式化元件：
const Button = styled.button`
font-size: 1.5em;
background-color: black;
color: white;
`
現在Button是一個React元件了。
我們使用了styled物件的一個函數來創建這個元件，並且在模板字面量中傳遞了一些CSS屬性。
現在，你可以在容器中使用正常的React語法渲染這個元件：
render(<Button />)
Styled Components還提供了其他一些函數，你可以使用這些函數創建其他元件，不僅僅是button，還有section、h1、input等等。
這種語法，用反引號，可能一開始看起來有點奇怪，但這是一種標記模板，它是一種將參數傳遞給函數的方式，並且是標準的JavaScript語法。
使用props來自定義元件
當你將一些props傳遞給樣式化元件時，它將將它們傳遞給DOM節點。例如，這是如何為一個input元件傳遞placeholder和type props：
const Input = styled.input`
//...
`
render(
<div>
<Input placeholder="..." type="text" />
</div>
)
這將像你想的那樣，將這些props插入為HTML屬性。
props不僅僅是盲目地傳遞給DOM，也可以根據props的值來自定義元件。這是一個例子：
const Button = styled.button`
background: ${props => (props.primary ? 'black' : 'white')};
color: ${props => (props.primary ? 'white' : 'black')};
`
render(
<div>
<Button>A normal button</Button>
<Button>A normal button</Button>
<Button primary>The primary button</Button>
</div>
)
設置primary props會改變按鈕的顏色。
擴展現有的樣式化元件
如果你有一個元件，並且你想創建一個類似的元件，只是稍微不同，你可以使用extend：
const Button = styled.button`
color: black;
//...
`
const WhiteButton = Button.extend`
color: white;
`
render(
<div>
<Button>A black button, like all buttons</Button>
<WhiteButton>A white button</WhiteButton>
</div>
)
這是常規的CSS
在Styled Components中，你可以使用你已經熟悉並喜愛的CSS語法。它就是普通的CSS。它不是虛擬CSS，也不是具有限制的內聯CSS。
你可以使用媒體查詢、巢狀和其他你可能需要的任何東西。
這是一個媒體查詢的例子：
const Button = styled.button`
color: green;
@media screen and (max-width: 800px) {
color: black;
}
`
使用供應商前綴
Styled Components會自動添加所有需要的供應商前綴，所以你不需要擔心這個問題。
結論
這就是Styled Components的介紹！這些概念將幫助你理解這種在JavaScript中使用CSS的方式，並幫助你上手使用。