การจัดการสไตล์ใน React

CSS-in-JS

CSS-in-JS ช่วยให้เขียน CSS ใน JavaScript โดยตรง มีข้อดีเรื่อง Scoped Styles และสามารถใช้ตัวแปรจาก JavaScript ได้

/** @jsxImportSource @emotion/react */
import { css } from "@emotion/react";

const buttonStyle = css`
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
`;

function Button() {
  return <button css={buttonStyle}>Click Me</button>;
}

CSS Modules

CSS Modules เป็นวิธีที่นิยมใช้ใน React โดยจะสร้าง unique class name ให้อัตโนมัติ ป้องกันการชนกันของชื่อคลาส

// Button.module.css
.primary {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
}

// Button.tsx
import styles from './Button.module.css';

function Button() {
  return <button className={styles.primary}>Click Me</button>;
}

Tailwind CSS

Tailwind CSS เป็น Utility-First CSS Framework ที่ช่วยให้สร้าง UI ได้รวดเร็ว

function Button() {
  return (
    <button className="px-4 py-2 bg-blue-500 text-white rounded">
      Click Me
    </button>
  );
}

UnoCSS

UnoCSS เป็น Atomic CSS Engine ที่ทำงานได้เร็วและปรับแต่งได้

function Button() {
  return (
    <button className="p-2 bg-blue-400 text-white rounded">
      Click Me
    </button>
  );
}