ทำความรู้จัก Styled-Components และการใช้งานเบื้องต้นใน React

• 💅 Styled-components คืออะไร ?
• ข้อดีของ Styled-components
• การติดตั้ง Styled-components (Installation)
• การทำ Extending Styles (Inheritance)
• การใช้งาน Pseudo-classes และ Pseudo-elements
• การทำ Nesting Component
• การทำ Dynamic Styling
• การทำ Global Style
• การทำ Animations

เวลาจะต้องทำ Dynamic Styling ให้กับ Component หลายคนอาจจะนึกถึง Inline CSS ซึ่งเป็นการใส่ Style ที่ต้องการลงไปใน Component หรือ Element นั้นตรงๆ แต่ Inline CSS เองก็มีข้อเสียอยู่ คือถ้าต้องการใส่ Style ให้กับหลายๆ Component ก็อาจจะเกิดการตกหล่นได้ และถ้าอยากทำ Dynamic Styling ให้กับ Pseudo-element ก็ลืมไปได้เลย ในบทความนี้จึงอยากจะมาแนะนำ Library นึง นั่นก็คือ Styled-components ที่จะช่วยให้การทำ Dynamic Styling เป็นเรื่องที่ง่ายขึ้นมาก แถมยังมีประโยชน์อีกมากมาย ลองมาดูกัน

💅 Styled-components คืออะไร ?

Styled-components เป็น Library ที่ทำให้เราสามารถเขียน CSS ใน Javascript (CSS-in-JS) ได้ ถือเป็นอีกหนึ่ง Styling Solution สำหรับการใส่ Style ให้กับ Components ใน React และ React Native โดยนำ Tagged Template Literals และ Arrow Functions ของ ES6+ มาใช้งาน

ในปัจจุบัน Styled-components ได้รับความนิยมอย่างแพร่หลายในหมู่ผู้ใช้งาน React

ข้อดีของ Styled-components

• Automatic Critical CSS ตัว Library จะคอยสังเกตว่า Component ไหนที่ถูก Render บนหน้าจอบ้าง และจะทำการ Inject แค่เฉพาะ Styles ของ Component เหล่านั้น
• ไม่มี Classname Bugs อีกต่อไป ปัญหาต่างๆ เช่น การใช้ชื่อ Classname ซ้ำ หรือปัญหาการสะกดชื่อ Classname ผิด/ไม่ตรงกับที่กำหนดไว้ตอนนำมาใช้จะหมดไป เพราะแต่ละ Style จะมีชื่อ Unique เป็นของตัวเอง
• ลบและจัดการ CSS ได้ง่าย การหา Class ที่ไม่ได้ใช้ใน Codebase ขนาดใหญ่เป็นอะไรที่ค่อนข้างยุ่งยาก แต่ถ้าใช้งาน Styled-Components แต่ละ Component จะมี Style เป็นของตัวเอง ซึ่งการลบ Component ไหนออกก็จะถือว่าลบ Style นั้นออกด้วย ปกติแล้วในโปรแกรม Code Editor เช่น Visual Studio Code จะสามารถหา Component ที่ไม่ได้ใช้งานได้ง่ายกว่า
• Styled-components ทำให้การทำ Dynamic Styling ง่ายขึ้นมาก
• Automatic Vendor Prefixing Library จะจัดการเรื่อง Vendor Prefixing ของบราวเซอร์ให้ เราแค่เขียน CSS ตาม Standard อย่างง่ายๆ ที่เรารู้ก็พอ

การติดตั้ง Styled-components (Installation)

ติดตั้งด้วย npm

npm install --save styled-components

ติดตั้งด้วย yarn

yarn add styled-components

การทำ Extending Styles (Inheritance)

ถ้าเราอยากจะได้ Style ของ Component นึงที่มีอยู่แล้ว แต่อยากเปลี่ยน CSS Properties แค่บางอัน เราไม่จำเป็นต้อง Duplicate Style อันนั้นมา เพราะด้วย Styled-components เราจะสามารถ Extend Styles ได้ ทำให้เรา Reuse CSS ได้ง่ายขึ้น

ตัวอย่างการทำ Extending Styles โดยใช้ Styled-components (เลื่อน Resizer เพื่อดู Code)

จากตัวอย่างจะเห็นได้ว่าเราสร้างวงกลมสีชมพู (2) ขึ้นมาโดยใช้ Style ของวงกลมสีเหลือง (1) แล้วเอามาเปลี่ยน Background-Color และเพิ่ม Margin-top เข้าไป

การใช้งาน Pseudo-classes และ Pseudo-elements

เราสามารถใช้ Styled-Components ทำ Pseudo-classes เช่น :hover หรือ :focus และ Pseudo-elements เช่น ::before และ ::after ได้เหมือนการเขียน CSS ปกติเลย โดยใช้เครื่องหมาย ampersand (&)

ตัวอย่างการทำ Pseudo-classes และ Pseudo-elements โดยใช้ Styled-components (เลื่อน Resizer เพื่อดู Code)

จากตัวอย่างจะนำ Pseudo-elements มาสร้างรูปหัวใจ และเมื่อเอาเม้าส์ไป Hover จะเห็น Shadow สีฟ้า ซึ่งใช้ Pseudo-class :hover ในการทำ

การทำ Nesting Component

Parent Component ที่เป็น Styled Component จะสามารถกำหนด Style ของ Children Element ได้เหมือน CSS ทั่วไปเลย

ตัวอย่างการทำ Nesting โดยใช้ Styled-components (เลื่อน Resizer เพื่อดู Code)

การทำ Dynamic Styling

Styled-components ทำให้การทำ Dynamic Styling เป็นเรื่องที่ง่ายมากๆ แค่ส่ง Props เข้าไปเท่านั้นเอง

ตัวอย่างการทำ Dynamic Styling โดยใช้ Styled-components (เลื่อน Resizer เพื่อดู Code)

ถ้าลองกด Color Picker ดู จะเห็นว่าสีของ Talk Bubble เปลี่ยนไปตามสีที่เรากดอย่างไม่มีจำกัด และ Font Size ของคำว่า hello world! ก็เปลี่ยนไปตามค่าที่กด Submit

การทำ Global Style

จากที่เรารู้คือ Styled Component จะมี Style ของใครของมัน แต่ถ้าเราอยากจะ Declare Style ที่ไว้ใช้ในทุกๆ Component ก็ทำได้ โดยใช้ createGlobalStyles

ตัวอย่างการทำ Global Style โดยใช้ Styled-components (เลื่อน Resizer เพื่อดู Code)

จากตัวอย่าง ถึงปุ่มแต่ละปุ่มจะมีขนาดและสีต่างกัน แต่สิ่งที่ทุกปุ่มมีเหมือนกันคือความสูง, Font-family, Font-size, สีตัวอักษร และ Margin-top ตามที่ได้ Declare ไว้ที่ createGlobalStyles

การทำ Animations

Keyframes Helper Function ใน Styled-components ช่วยให้เราสามารถสร้าง Reusable Keyframe ที่สามารถ Export ออกไปใช้ที่อื่นได้ง่ายขึ้น

วิธีการ Import Keyframes ที่มีอยู่แล้วไปใช้ที่อื่นใน App

import { ชื่อ keyframes } from './ชื่อไฟล์ที่ keyframes นั้นถูกสร้าง'

ตัวอย่างการทำ Animation โดยใช้ Styled-components (เลื่อน Resizer เพื่อดู Code)

ขอบคุณรูปภาพ Rain Clouds PNG Transparent Background

✨ Tips ✨

ถ้าหากใช้งาน Styled-Components ใน Visual Studio Code แนะนำให้ Install vscode-Styled-Components Extension มาใช้ จะช่วยให้ใช้งานได้สะดวกขึ้น โดยฟีเจอร์เด่นๆ ของ Extension นี้คือการทำ Syntax Highlighting และ intelliSense หรือการเติมข้อความอัตโนมัติ (Autocompletion) ให้

เมื่ออ่านมาถึงตรงนี้ หลายคนน่าจะเริ่มเข้าในคอนเซ็ปต์ของ Styled-Components มากขึ้น หากมีโอกาส หวังว่าผู้อ่านจะนำ Library นี้ไปใช้งานได้อย่างเหมาะสม รวมถึงได้ประโยชน์จากบทความนี้ไปไม่มากก็น้อย ขอบคุณค่ะ

สำหรับใครที่สนใจเรื่องราวดีๆ หรืออยากเรียนรู้เกี่ยวกับ Product ใหม่ๆ จากชาว KBTG สามารถติดตามรายละเอียดกันได้ที่เว็บไซต์ www.kbtg.tech