CSS Academy · Pelajaran

Styled-components: Literal Templat Bertanda

Buat komponen React bergaya menggunakan literal templat bertanda dengan pustaka styled-components.

Pelajaran 1 dari 413 langkah

Styled-components: Literal Templat Bertanda adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.

Apa Itu styled-components

styled-components adalah pustaka CSS-in-JS untuk React yang memungkinkan Anda menulis CSS langsung di dalam berkas JavaScript menggunakan literal templat bertag. Setiap komponen styled mendapatkan nama kelas unik dengan pencakupan otomatis.

Literal Templat Bertag

Literal templat bertag JavaScript memungkinkan sebuah fungsi memproses string templat. styled-components menggunakannya untuk mengurai 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>

Gaya Dinamis dengan Properti

Akses properti komponen di dalam literal templat untuk membuat gaya dinamis:

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>

Alternatif Properti Kustom CSS

Untuk nilai dinamis yang lebih sederhana, prioritaskan properti kustom CSS daripada logika berbasis properti—pendekatan ini lebih efisien dan mengurangi interpolasi 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' }}>

Memperluas Gaya

Perluas komponen styled yang sudah ada untuk menambahkan gaya:

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

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

Penyarangan dan Pemilih &

styled-components mendukung penyarangan seperti Sass menggunakan & sebagai referensi ke induk:

const Nav = styled.nav`
  display: flex;

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

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

createGlobalStyle

Tentukan gaya global (reset, gaya dasar) menggunakan 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 menyediakan ThemeProvider untuk mengakses nilai tema di dalam komponen:

import { ThemeProvider } from 'styled-components';

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

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

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

Pertimbangan Kinerja

styled-components menghasilkan nama kelas saat dijalankan. Untuk aplikasi yang kritis terhadap kinerja, pertimbangkan ekstraksi statis menggunakan plugin Babel atau beralih ke alternatif tanpa proses saat dijalankan seperti Vanilla Extract atau CSS Modules.

Rendering di Sisi Server

styled-components mendukung SSR dengan API ServerStyleSheet untuk mengumpulkan dan menyisipkan gaya selama rendering di server, sehingga mencegah kilatan konten tanpa gaya.

Alternatif dan Ekosistem

Ekosistem styled-components mencakup: emotion (API serupa), linaria (tanpa proses saat dijalankan), Vanilla Extract (aman terhadap tipe), dan Panda CSS (berbasis utilitas). Masing-masing menawarkan kompromi antara beban saat dijalankan, DX, dan kinerja.

Pemeriksaan Singkat

Bagaimana styled-components mencegah bentroknya nama kelas antarkomponen?

Jawab di pelajaran interaktif

Ringkasan

styled-components menggunakan literal templat bertag untuk mendefinisikan CSS berdampingan dengan komponen React. Properti dapat mengendalikan gaya dinamis melalui interpolasi JavaScript. Komponen dapat diperluas, disarang, dan dibuat sadar tema melalui ThemeProvider. Untuk produksi, pertimbangkan plugin Babel untuk ekstraksi statis dan dukungan rendering di sisi server. Untuk alternatif tanpa proses saat dijalankan, evaluasi Vanilla Extract atau CSS Modules.

Gratis untuk memulai

Belajar CSS dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 40
Pelajaran: 159

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Styled-components: Literal Templat Bertanda” gratis?

Ya — teks lengkap “Styled-components: Literal Templat Bertanda” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Styled-components: Literal Templat Bertanda”?

Buat komponen React bergaya menggunakan literal templat bertanda dengan pustaka styled-components. Kamu berlatih CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai CSS Academy?

Tidak diperlukan pengalaman sebelumnya. CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Styled-components: Literal Templat Bertanda” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran CSS Academy ini?

Ya. Setiap pelajaran CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Styled-components: Literal Templat Bertanda
Emotion: css() dan styled()
CSS Modules: Gaya Terlingkup
Vanilla Extract: CSS-in-JS Tanpa Waktu Jalan

← Kembali ke CSS Academy