###### tags: `前端技能樹`

# 在JS中寫CSS，神套件Styled-components

要如何在 React 中撰寫 CSS，為元素添加樣式？目前的方法有 Inline-Style、CSS Modules...，其中一個方法就是很多人使用的 Styled-components。**Styled-components 是一個 CSS-in-JS 函式庫，讓我們可以在 JS 中撰寫 CSS**，直接針對 React Component 去進行樣式設定，並且同時解決了 CSS 常遇到的命名衝突的問題。

## Styling a component

Styled-components 利用了 Javascript 的樣板字面值(Template literals)來設置組建的樣式，允許在字串中嵌入運算式，字串用反引號 ` `` ` 取代單雙引號包住；運算式則由 `$` 字元和 `{}` 包裹組成，舉例如下：

`string ${expression} string`

**設定樣式的同時，Styled-components 會直接建立一個 React Component，包含所指定的 Element**。比如下面我們針對 ```<h2>``` 元素設定樣式，同時建立成一個 Component ```<Title>```：

import styled from "styled-components";

const Title = styled.h2`
  font-size: 20px;
  color: red;
`;

render(
  <div>
    <Title>標題文字</Title>
  </div>
);


## 根據Props改變樣式

當我們建立的是一個普通的 React Component，就代表可以在組件間傳遞 Props，配上樣板字面值的功能，針對組件的樣式進行調整就變得很方便。舉例如下，若 ```<Title>``` 有設置 Prop ```red``` 就顯示紅色的文字，沒有就顯示黑色的文字：

const Title = styled.h2`
  font-size: 20px;
  color: ${props => props.red ? "red" : "black"};
`;

render(
  <div>
    <Title red>標題文字</Title>
    <Title>標題文字</Title>
  </div>
);


## 擴展樣式

在 React 中，會常常使用同一個 Component 來建立相同的 UI，而我們可能希望針對各別組件去稍微修改它的樣式， Styled-components就提供了一個方法，**只需要將基礎組件包在 ```styled()``` 內，就能夠繼承組件樣式再擴展出一個新的組件**。比如前一個範例，可以用下面的程式碼做到相同的效果：

const Title = styled.h2`
  font-size: 20px;
  color: black;
`;
const RedTitle = styled(Title)`
  color: red;
`;

render(
  <div>
    <RedTitle>標題文字</RedTitle>
    <Title>標題文字</Title>
  </div>
);

或者我們想要改變的是 Component 的標籤或繼承組件，可以利用 Prop ```as```指定，比如將第二個標題從 ```<h2>``` 改成 ```<p>``` 元素：

render(
  <div>
    <RedTitle>標題文字</RedTitle>
    <Title as="p">標題文字</Title>
  </div>
);


## 巢狀(Nesting)語法

Styled-components 還支持使用 SCSS 語法，可以在巢狀結構內設定子組件的樣式，或是使用 ```&``` 字元添加 CSS 偽類。比如下面的程式碼，為 Title Component 加上 ```hover``` 樣式、以及針對內部的 ```span``` 子元素添加樣式：

const Title = styled.h2`
  font-size: 20px;
  color: black;

  &:hover {
    color: blue; // <Title> when hovered
  }

  span {
    color: green; // style <span> in <Title>
  }
`;

return (
  <div>
    <RedTitle>標題文字</RedTitle>
    <Title>
      標題<span>文字</span>
    </Title>
  </div>
);


## 小結

簡單的入門了 Styled-components，學會了一些基本的使用，現在我們就可以在 React 中定義元素的樣式。

如果文章中有錯誤的地方，要麻煩各位大大不吝賜教；喜歡的話，也要記得幫我按讚訂閱喔❤️

### 參考資料
- [Styled Component - Document](https://styled-components.com/docs/basics#motivation)