What are styled-components

#HelloFrontend #HelloErmine #HelloWorld2021

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 เพื่อทำการติดตั้ง

yarn add styled-components

ตัวอย่างการติดตั้ง styled-components ในหน้าต่าง Terminal

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

import styled from 'styled-components';