เทคนิคการทำ Styling ใน React ด้วย TypeScript: Tailwind, CSS Modules และ Styled Components

ทำไมต้องจัดแต่งหน้าตาด้วย TypeScript ใน React

การทำหน้าเว็บให้สวยงามเหมือนการแต่งบ้าน ถ้าเราไม่มีระบบจัดการที่ดี สุดท้ายบ้านจะรกและหาของไม่เจอ React TypeScript Styling คือการเอาภาษาที่ช่วยตรวจเช็คความผิดพลาดมาคุมการตกแต่งหน้าเว็บของเรา

เวลาเราเขียนโปรแกรมขนาดใหญ่ การจำว่าใครใช้สีอะไรหรือขนาดเท่าไหร่เป็นเรื่องยากมาก การใช้ TypeScript (ภาษาที่ช่วยให้เขียนโค้ดได้แม่นยำขึ้นโดยการระบุชนิดข้อมูล) จะช่วยเตือนเราทันทีถ้าใส่ค่าผิด

ถ้าเปรียบเทียบง่ายๆ เหมือนเรามีคู่มือเขียนแบบบ้านที่บังคับว่าห้ามใช้สีนอกเหนือจากที่กำหนดไว้ ทำให้งานของเราเป็นระเบียบและลดการเดาใจตัวเองในอนาคตได้ดีมากครับ

ใช้งาน Tailwind CSS แบบมือโปร

Tailwind CSS (เครื่องมือช่วยแต่งหน้าเว็บด้วยการพิมพ์คำสั่งสั้นๆ) เป็นที่นิยมเพราะมันเร็วและไม่ต้องสลับไฟล์ไปมา การใช้ร่วมกับ TypeScript จะช่วยให้เรามั่นใจว่าคลาสที่เราพิมพ์ไปนั้นมีอยู่จริง

จุดที่มือใหม่พลาดบ่อยคือการจำชื่อคลาสไม่ได้ หรือพิมพ์ผิดแล้วหน้าเว็บไม่เปลี่ยน การใช้ TypeScript ช่วยให้ IDE (โปรแกรมที่ใช้เขียนโค้ด) แสดงรายการคลาสที่ถูกต้องขึ้นมาให้เราเลือกทันที

ลองนึกภาพว่าเรากำลังหยิบสีทาบ้านจากกระป๋องที่มีป้ายชื่อแปะไว้ชัดเจน แทนที่จะไปผสมสีเองมั่วๆ จนหน้าตาเว็บเพี้ยนไปหมดครับ

// ตัวอย่างการใช้ Tailwind CSS ใน React
interface ButtonProps {
  variant: 'primary' | 'secondary'; // กำหนดให้เลือกได้แค่ 2 แบบ
}

const Button = ({ variant }: ButtonProps) => {
  // รวมคลาสเข้าด้วยกันตามเงื่อนไข
  const style = variant === 'primary' ? 'bg-blue-500' : 'bg-gray-500';
  return <button className={`px-4 py-2 ${style}`}>คลิกเลย</button>;
};

โค้ดด้านบนใช้ interface (ตัวกำหนดหน้าตาของข้อมูล) เพื่อบังคับว่าถ้าจะสร้างปุ่ม ต้องเลือกสีแค่ 2 แบบเท่านั้น ทำให้คนอื่นในทีมเอาโค้ดเราไปใช้ต่อได้ง่ายโดยไม่สับสน

จัดการสไตล์ด้วย CSS Modules

CSS Modules (วิธีแยกไฟล์ตกแต่งให้อยู่เป็นส่วนๆ) ช่วยแก้ปัญหาชื่อคลาสทับกัน เวลาเราทำโปรเจกต์ใหญ่ๆ ถ้าตั้งชื่อคลาสเหมือนกัน โค้ดจะตีกันจนหน้าเว็บพัง

เมื่อใช้คู่กับ TypeScript เราสามารถนำเข้า (import) ไฟล์สไตล์มาใช้เหมือนเป็นตัวแปร ทำให้เราเห็นจุดผิดพลาดได้ทันทีถ้าพิมพ์ชื่อคลาสไม่ตรงกับไฟล์ CSS ที่เราสร้างไว้

มันเหมือนกับการเก็บเสื้อผ้าแยกตู้ตามประเภท เราจะไม่หยิบถุงเท้าไปใส่ในตู้กางเกงแน่นอน ซึ่งช่วยให้เราหาไฟล์ที่ต้องแก้ไขเจอได้ไวขึ้นมากครับ

// การใช้งาน CSS Modules ร่วมกับ TypeScript
import styles from './Button.module.css';

const MyComponent = () => {
  // ใช้ styles.button เพื่อเรียกคลาสจากไฟล์ CSS
  return <div className={styles.button}>เนื้อหาในกล่อง</div>;
};

ในตัวอย่างเราเรียกใช้ styles.button ถ้าเราเผลอพิมพ์ชื่อคลาสที่ไม่มีในไฟล์ CSS ตัว TypeScript จะขีดเส้นใต้แดงเตือนเราทันที ไม่ต้องรอไปรันดูหน้าเว็บครับ

กำหนด Type สำหรับ Dynamic Class Names

Dynamic Class Names (การเปลี่ยนคลาสตามเงื่อนไข) เป็นสิ่งที่ต้องเจอทุกวันในการเขียนเว็บ เช่น การทำปุ่มสีเปลี่ยนตามสถานะ ถ้าเราไม่คุมให้ดี โค้ดจะกลายเป็นกองขยะที่อ่านยาก

เราควรใช้ Type Aliases (การสร้างชื่อเรียกแทนกลุ่มข้อมูล) มาช่วยกำหนดว่าสถานะไหนควรคู่กับคลาสอะไร วิธีนี้จะทำให้โค้ดของเราดูสะอาดและจัดการง่ายในระยะยาว

จำไว้ว่าเราไม่ได้เขียนโค้ดให้คอมพิวเตอร์อ่านอย่างเดียว แต่เราเขียนให้ตัวเองในอีก 3 เดือนข้างหน้ามาอ่านด้วย การเขียนแบบนี้จะทำให้เราไม่ปวดหัวเวลาต้องกลับมาแก้งานเดิมครับ

// การกำหนด Type สำหรับคลาสที่เปลี่ยนไปมา
type Status = 'success' | 'error' | 'loading';

const getStatusClass = (status: Status): string => {
  const classes = {
    success: 'text-green-500',
    error: 'text-red-500',
    loading: 'text-yellow-500',
  };
  return classes[status];
};

โค้ดนี้สร้างฟังก์ชันที่รับสถานะเข้ามาแล้วคืนค่าคลาสที่ถูกต้อง หากอนาคตเราเพิ่มสถานะใหม่เข้าไป TypeScript จะบังคับให้เราเพิ่มคลาสให้ครบทุกสถานะทันที

เทคนิคการใช้ Styled Components กับ TypeScript

Styled Components (เครื่องมือเขียน CSS ไว้ในไฟล์ JavaScript) เป็นวิธีที่ทรงพลังมากสำหรับการทำคอมโพเนนต์ที่ปรับเปลี่ยนหน้าตาได้ผ่าน Props (ข้อมูลที่ส่งเข้าไปในคอมโพเนนต์)

ความเจ๋งคือเราสามารถระบุ Interface ให้กับ Props เหล่านั้นได้ ทำให้เรามั่นใจว่าถ้าจะเปลี่ยนขนาดปุ่มหรือสีพื้นหลัง เราต้องส่งข้อมูลที่ถูกต้องเข้าไปเท่านั้น

มันเหมือนกับการสั่งทำเสื้อผ้าตามขนาดตัว ถ้าเราใส่ตัวเลขผิด ระบบจะบอกเราก่อนที่ผ้าจะถูกตัดออกมา ทำให้ประหยัดเวลาและลดบั๊ก (ข้อผิดพลาดของโปรแกรม) ได้มหาศาล

import styled from 'styled-components';

// กำหนดว่าต้องมี prop ชื่อ size
interface BoxProps {
  size: number;
}

const Box = styled.div<BoxProps>`
  width: ${(props) => props.size}px;
  height: 50px;
  background: blue;
`;

ที่นี่เรากำหนด BoxProps เพื่อบอกว่า size ต้องเป็นตัวเลขเท่านั้น ถ้าเราเผลอส่งข้อความเข้าไปแทนตัวเลข โปรแกรมจะเตือนเราทันที ช่วยให้งานเนี้ยบขึ้นเยอะครับ

สรุป: เลือกทางไหนให้เหมาะกับงาน

สรุปแล้วไม่ว่าจะใช้ Tailwind, CSS Modules หรือ Styled Components สิ่งสำคัญที่สุดคือการใช้ TypeScript เข้ามาคุมให้โค้ดของเรามีมาตรฐานและอ่านง่าย เลือกเครื่องมือที่ทีมคุณใช้หรือที่โปรเจกต์นั้นต้องการ

สมมติว่าคุณกำลังทำโปรเจกต์ส่วนตัวเพื่อเก็บลง Portfolio (แฟ้มสะสมผลงาน) แนะนำให้ลองใช้ Tailwind CSS ก่อนเพราะมันเร็วและช่วยให้เห็นผลลัพธ์ทันที เหมาะมากสำหรับคนที่กำลังฝึกฝน

สุดท้ายอย่าลืมว่าเทคโนโลยีเปลี่ยนตลอดเวลา แต่พื้นฐานการจัดการโค้ดให้สะอาดนั้นสำคัญกว่า ฝึกให้เป็นนิสัยตั้งแต่ตอนนี้ แล้ววันหนึ่งคุณจะขอบคุณตัวเองที่เลือกเขียนโค้ดอย่างเป็นระบบครับ