0Pricing
Frontend Academy · บทเรียน

CSS-in-JS: Styled-components และ Emotion

เขียนสไตล์ของคอมโพเนนต์เป็น template literals ที่ติดแท็กด้วย styled-components หรือใช้พร็อพ css กับ Emotion และใช้ props สำหรับสไตล์แบบไดนามิก

CSS-in-JS: Styled-components และ Emotion เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

CSS-in-JS คืออะไร

CSS-in-JS คือการเขียนสไตล์ของคอมโพเนนต์ไว้โดยตรงใน JavaScript/TypeScript สไตล์จะอยู่ร่วมกับคอมโพเนนต์ รองรับค่าไดนามิกจากพร็อพเพอร์ตี และมีขอบเขตโดยอัตโนมัติ ไลบรารียอดนิยมสองรายการคือ styled-components และ Emotion

พื้นฐาน Styled-components

ใช้เทมเพลตลิเทอรัลแบบติดแท็กเพื่อกำหนดคอมโพเนนต์ที่มีสไตล์ ผลลัพธ์คือคอมโพเนนต์ React ที่แสดงองค์ประกอบ HTML พร้อมใช้สไตล์นั้น

import styled from 'styled-components';

const Button = styled.button`
  background: ${props => props.primary ? '#6366f1' : 'white'};
  color: ${props => props.primary ? 'white' : '#6366f1'};
  padding: 8px 16px;
  border: 2px solid #6366f1;
  border-radius: 4px;
  cursor: pointer;

  &:hover {
    opacity: 0.9;
  }
`;

<Button primary>Primary</Button>
<Button>Outline</Button>

Emotion — พร็อพเพอร์ตี css

พร็อพเพอร์ตี css ของ Emotion ใช้สไตล์กับองค์ประกอบ JSX ใดก็ได้ โดยต้องใช้เพร็กมาของ @emotion/react หรือค่าที่ตั้งไว้ล่วงหน้าของ Babel

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

function Card({ featured }: { featured?: boolean }) {
  return (
    <div css={css`
      padding: 16px;
      border-radius: 8px;
      border: ${featured ? '2px solid #6366f1' : '1px solid #e2e8f0'};
    `}>
      Content
    </div>
  );
}

สไตล์ไดนามิกจากพร็อพเพอร์ตี

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

การกำหนดธีมด้วย ThemeProvider

ทั้ง Styled-components และ Emotion รองรับ ThemeProvider ซึ่งจะแทรกค่าธีมลงในคอมโพเนนต์ที่มีสไตล์ทั้งหมด

import { ThemeProvider } from 'styled-components';

const theme = { colors: { primary: '#6366f1', bg: '#f7fafc' }, space: { sm: 8, md: 16 } };

<ThemeProvider theme={theme}>
  <App />
</ThemeProvider>

// Access in styled component:
const Card = styled.div`
  background: ${props => props.theme.colors.bg};
  padding: ${props => props.theme.space.md}px;
`;

การขยายคอมโพเนนต์ที่มีสไตล์

ขยายคอมโพเนนต์ที่มีสไตล์อยู่แล้วเพื่อสร้างรูปแบบใหม่โดยไม่ต้องทำสำเนาสไตล์

const Button = styled.button`
  padding: 8px 16px;
  border-radius: 4px;
`;

const DangerButton = styled(Button)`
  background: #e53e3e;
  color: white;
`;

สไตล์โกลบอล

ใช้ createGlobalStyle (styled-components) หรือ Global (Emotion) สำหรับ CSS โกลบอล เช่น สไตล์ของ body และการรีเซ็ตค่า

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  *, *::before, *::after { box-sizing: border-box; }
  body { margin: 0; font-family: system-ui; }
`;

<><GlobalStyle /><App /></>

ต้นทุนขณะทำงานของ CSS-in-JS

ไลบรารี CSS-in-JS จะแทรกสไตล์ขณะทำงานผ่าน JavaScript ซึ่งเพิ่มต้นทุน CPU สำหรับการแยกวิเคราะห์และการแทรกสไตล์ รวมถึงเพิ่มขนาดชุด JavaScript ทางเลือกที่ไม่มีค่าใช้จ่ายขณะทำงาน เช่น vanilla-extract และ linaria จะสร้าง CSS แบบคงที่ขณะสร้างโปรแกรม

ทางเลือกที่ไม่มีค่าใช้จ่ายขณะทำงาน

vanilla-extract: เขียนสไตล์ใน TypeScript แล้วคอมไพล์เป็น CSS แบบคงที่ linaria: ไวยากรณ์ CSS-in-JS ที่คอมไพล์เป็น CSS Modules ทั้งสองมอบความสะดวกในการใช้งานแบบ CSS-in-JS โดยไม่มีค่าใช้จ่ายขณะทำงาน

TypeScript กับ styled-components

กำหนด ThemeType และขยายอินเทอร์เฟซ DefaultTheme จาก styled-components เพื่อให้ธีมมีชนิดข้อมูลครบถ้วน

import 'styled-components';
import { theme } from './theme';

declare module 'styled-components' {
  export interface DefaultTheme extends typeof theme {}
}

เมื่อใดควรเลือก CSS-in-JS

CSS-in-JS เหมาะอย่างยิ่งสำหรับสไตล์ไดนามิกที่ขับเคลื่อนด้วยค่า JavaScript ขณะทำงาน ระบบการออกแบบที่ต้องการการกำหนดธีมอย่างเข้มข้น และทีมที่ชอบกระบวนการทำงานโดยให้ JavaScript เป็นหลัก ต้นทุนขณะทำงานมักยอมรับได้สำหรับส่วนติดต่อผู้ใช้ที่ไม่เน้นประสิทธิภาพเป็นพิเศษ

ตรวจสอบอย่างรวดเร็ว

ข้อแลกเปลี่ยนหลักของไลบรารี CSS-in-JS ที่ทำงานขณะทำงาน เมื่อเทียบกับโซลูชัน CSS แบบคงที่คืออะไร

ทบทวน: CSS-in-JS

Styled-components: เทมเพลตลิเทอรัลแบบติดแท็กและแสดงองค์ประกอบ React ที่มีสไตล์ Emotion: พร็อพเพอร์ตี css หรือเอพีไอ styled สไตล์ไดนามิกจากพร็อพเพอร์ตีช่วยขจัดการสลับคลาส ThemeProvider จะแทรกค่าธีม createGlobalStyle ใช้สำหรับ CSS โกลบอล ต้นทุนขณะทำงานคือข้อแลกเปลี่ยนหลัก ทางเลือกที่ไม่มีค่าใช้จ่ายขณะทำงาน ได้แก่ vanilla-extract และ linaria

คำถามที่พบบ่อย

บทเรียน “CSS-in-JS: Styled-components และ Emotion” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “CSS-in-JS: Styled-components และ Emotion” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “CSS-in-JS: Styled-components และ Emotion”

เขียนสไตล์ของคอมโพเนนต์เป็น template literals ที่ติดแท็กด้วย styled-components หรือใช้พร็อพ css กับ Emotion และใช้ props สำหรับสไตล์แบบไดนามิก คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “CSS-in-JS: Styled-components และ Emotion” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม

ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. ระเบียบวิธี BEM: Block, Element และ Modifier
  2. CSS Modules: ชื่อคลาสที่จำกัดขอบเขต
  3. CSS-in-JS: Styled-components และ Emotion
  4. Tailwind CSS: แนวทาง Utility-First
← กลับไปที่ Frontend Academy