/

Styled Components（樣式化元件）

Styled Components（樣式化元件）

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而不會泄漏到頁面中其他元素的方式。

更多關於CSS模組的資訊，請參考這裡和這裡。

安裝

使用npm或yarn安裝styled-components：

1
2
npm install styled-components
yarn add styled-components

只要進行了安裝，你只需要添加這個import語句：

1
import styled from 'styled-components'

你的第一個樣式化元件

在導入styled物件後，你就可以開始創建樣式化元件。這是你的第一個樣式化元件：

1
2
3
4
5
const Button = styled.button`
 font-size: 1.5em;
 background-color: black;
 color: white;
`

現在Button是一個React元件了。

我們使用了styled物件的一個函數來創建這個元件，並且在模板字面量中傳遞了一些CSS屬性。

現在，你可以在容器中使用正常的React語法渲染這個元件：

1
render(<Button />)

Styled Components還提供了其他一些函數，你可以使用這些函數創建其他元件，不僅僅是button，還有section、h1、input等等。

這種語法，用反引號，可能一開始看起來有點奇怪，但這是一種標記模板，它是一種將參數傳遞給函數的方式，並且是標準的JavaScript語法。

使用props來自定義元件

當你將一些props傳遞給樣式化元件時，它將將它們傳遞給DOM節點。例如，這是如何為一個input元件傳遞placeholder和type props：

1
2
3
4
5
6
7
8
9
const Input = styled.input`
 //...
`

render(
 <div>
 <Input placeholder="..." type="text" />
 </div>
)

這將像你想的那樣，將這些props插入為HTML屬性。

props不僅僅是盲目地傳遞給DOM，也可以根據props的值來自定義元件。這是一個例子：

1
2
3
4
5
6
7
8
9
10
11
12
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：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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。

你可以使用媒體查詢、巢狀和其他你可能需要的任何東西。

這是一個媒體查詢的例子：

1
2
3
4
5
6
const Button = styled.button`
 color: green;
 @media screen and (max-width: 800px) {
 color: black;
 }
`

使用供應商前綴

Styled Components會自動添加所有需要的供應商前綴，所以你不需要擔心這個問題。

結論

這就是Styled Components的介紹！這些概念將幫助你理解這種在JavaScript中使用CSS的方式，並幫助你上手使用。