---
description: '#HelloFrontend #HelloErmine #HelloWorld2021'
---

# What are styled-components

## styled-components คืออะไร ?

styled-components เป็น JavaScript library ที่ช่วยให้สามารถสร้าง component จาก HTML elements ต่าง ๆ เช่น div, span, a, p หรืออื่น ๆ ให้มี style เหมือน CSS

## **ขั้นตอนการติดตั้ง styled-components**

1. เปิดโฟลเดอร์ของ Project ที่ต้องการติดตั้ง styled-components
2. เปิดหน้าต่าง Terminal ใน Visual Studio Code โดยคลิกไปที่ View บนแถบเมนู จากนั้นเลือก Terminal
3. เขียนคำสั่ง `yarn add styled-components`  ลงบนหน้าต่าง Terminal เพื่อทำการติดตั้ง

```javascript
yarn add styled-components
```

![ตัวอย่างการติดตั้ง styled-components ในหน้าต่าง Terminal](https://1572294076-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Me05uuZ2Kw6VszdHXnU%2F-MfGG-hcOPrrU3H6ndom%2F-MfGIkuGE1on5Fb_AUxS%2Fimage.png?alt=media\&token=c528f2f2-8de4-4bfe-af0b-82703f7b3a9b)

&#x20;   4\. ในแต่ละหน้าที่ต้องการเรียกใช้ styled-components จะต้องทำการ import ด้วย ใช้คำสั่ง `import styled from styled-components;`

```javascript
import styled from 'styled-components';
```
