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

Styled-components: ลิเทอรัลแม่แบบแบบติดป้าย

สร้างองค์ประกอบ React ที่มีรูปแบบด้วยลิเทอรัลแม่แบบแบบติดป้าย โดยใช้ไลบรารี styled-components

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

styled-components คืออะไร

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

เทมเพลตลิเทอรัลแบบติดแท็ก

เทมเพลตลิเทอรัลแบบติดแท็กของ JavaScript ช่วยให้ฟังก์ชันประมวลผลสตริงเทมเพลตได้ styled-components ใช้คุณสมบัตินี้เพื่อแยกวิเคราะห์ CSS:

import styled from 'styled-components';

const Button = styled.button`
  background: royalblue;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
`;

// Usage in JSX:
// <Button>Click me</Button>

สไตล์แบบไดนามิกด้วยพร็อพส์

เข้าถึงพร็อพส์ของคอมโพเนนต์ภายในเทมเพลตลิเทอรัลเพื่อกำหนดสไตล์แบบไดนามิก:

const Button = styled.button`
  background: ${props => props.variant === 'danger' ? 'crimson' : 'royalblue'};
  color: white;
  opacity: ${props => props.disabled ? 0.5 : 1};
`;

// <Button variant="danger">Delete</Button>

ทางเลือกของคุณสมบัติแบบกำหนดเองของ CSS

สำหรับค่าแบบไดนามิกที่ไม่ซับซ้อน ควรใช้คุณสมบัติแบบกำหนดเองของ CSS แทนตรรกะที่ขับเคลื่อนด้วยพร็อพส์ เพราะมีประสิทธิภาพดีกว่าและลดการแทรกค่าจาก JavaScript:

const Card = styled.div`
  background: var(--card-bg, white);
  color: var(--card-text, #111);
`;
// Set variables via style prop: <Card style={{ '--card-bg': 'navy' }}>

การขยายสไตล์

ขยายคอมโพเนนต์แบบมีสไตล์ที่มีอยู่เพื่อเพิ่มสไตล์:

const PrimaryButton = styled(Button)`
  background: royalblue;
  font-weight: bold;
`;

const DangerButton = styled(Button)`
  background: crimson;
`;

การซ้อนกฎและตัวเลือก &

styled-components รองรับการซ้อนกฎแบบ Sass โดยใช้ & สำหรับอ้างอิงองค์ประกอบแม่:

const Nav = styled.nav`
  display: flex;

  & a {
    color: white;
    text-decoration: none;
  }

  & a:hover {
    text-decoration: underline;
  }
`;

createGlobalStyle

กำหนดสไตล์ส่วนกลาง (การรีเซ็ตและสไตล์พื้นฐาน) โดยใช้ createGlobalStyle:

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  *, *::before, *::after { box-sizing: border-box; }
  body { font-family: system-ui, sans-serif; margin: 0; }
`;
// Include <GlobalStyle /> in your app root

ThemeProvider

styled-components มี ThemeProvider สำหรับเข้าถึงโทเคนของธีมภายในคอมโพเนนต์:

import { ThemeProvider } from 'styled-components';

const theme = { colors: { primary: 'royalblue' } };

const Button = styled.button`
  background: ${({ theme }) => theme.colors.primary};
`;

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

ข้อควรพิจารณาด้านประสิทธิภาพ

styled-components สร้างชื่อคลาสขณะรันไทม์ สำหรับแอปพลิเคชันที่ต้องให้ความสำคัญกับประสิทธิภาพ ควรพิจารณาการดึง CSS แบบคงที่โดยใช้ปลั๊กอิน Babel หรือเปลี่ยนไปใช้ทางเลือกที่ไม่ต้องทำงานขณะรันไทม์ เช่น Vanilla Extract หรือมอดูล CSS

การเรนเดอร์ฝั่งเซิร์ฟเวอร์

styled-components รองรับ SSR ด้วย API ServerStyleSheet เพื่อรวบรวมและแทรกสไตล์ระหว่างการเรนเดอร์ฝั่งเซิร์ฟเวอร์ ช่วยป้องกันการแสดงเนื้อหาที่ยังไม่มีสไตล์ชั่วขณะ

ทางเลือกและระบบนิเวศ

ระบบนิเวศของ styled-components ประกอบด้วย emotion (API คล้ายกัน), linaria (ไม่ต้องทำงานขณะรันไทม์), Vanilla Extract (ปลอดภัยด้านชนิดข้อมูล) และ Panda CSS (เน้นยูทิลิตี) แต่ละตัวมีจุดแลกเปลี่ยนระหว่างค่าใช้จ่ายขณะรันไทม์, DX และประสิทธิภาพ

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

styled-components ป้องกันการชนกันของชื่อคลาสระหว่างคอมโพเนนต์ได้อย่างไร

สรุปทบทวน

styled-components ใช้เทมเพลตลิเทอรัลแบบติดแท็กเพื่อกำหนด CSS ควบคู่กับคอมโพเนนต์ React พร็อพส์สามารถควบคุมสไตล์แบบไดนามิกผ่านการแทรกค่าจาก JavaScript คอมโพเนนต์สามารถขยาย ซ้อนกฎ และรับธีมผ่าน ThemeProvider ได้ สำหรับการใช้งานจริง ควรพิจารณาปลั๊กอิน Babel เพื่อดึง CSS แบบคงที่และรองรับการเรนเดอร์ฝั่งเซิร์ฟเวอร์ หากต้องการทางเลือกที่ไม่ต้องทำงานขณะรันไทม์ ให้ประเมิน Vanilla Extract หรือมอดูล CSS

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

บทเรียน “Styled-components: ลิเทอรัลแม่แบบแบบติดป้าย” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “Styled-components: ลิเทอรัลแม่แบบแบบติดป้าย”

สร้างองค์ประกอบ React ที่มีรูปแบบด้วยลิเทอรัลแม่แบบแบบติดป้าย โดยใช้ไลบรารี styled-components คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

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

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

บทเรียน “Styled-components: ลิเทอรัลแม่แบบแบบติดป้าย” ใช้เวลานานแค่ไหน

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

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

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

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

  1. Styled-components: ลิเทอรัลแม่แบบแบบติดป้าย
  2. Emotion: css() และ styled()
  3. CSS Modules: รูปแบบตามขอบเขต
  4. Vanilla Extract: CSS-in-JS แบบไม่ใช้ขณะทำงาน
← กลับไปที่ CSS Academy