CSS-in-JS: Styled-components dan Emotion
Tulis style komponen sebagai template literal bertag dengan styled-components atau prop css dengan Emotion, dan gunakan props untuk style dinamis.
CSS-in-JS: Styled-components dan Emotion adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 3 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 Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa Itu CSS-in-JS
CSS-in-JS menulis gaya komponen langsung dalam JavaScript/TypeScript. Gaya ditempatkan bersama komponen, mendukung nilai dinamis dari properti, dan otomatis tercakup. Dua pustaka paling populer adalah styled-components dan Emotion.
Dasar-Dasar styled-components
Gunakan literal templat bertag untuk mendefinisikan komponen bergaya. Hasilnya adalah komponen React yang merender elemen HTML dengan gaya yang diterapkan.
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 — Prop css
Prop css milik Emotion menerapkan gaya ke elemen JSX apa pun. Prop ini memerlukan pragma @emotion/react atau prasetel 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>
);
}Gaya Dinamis dari Properti
Kedua pustaka dapat membaca properti untuk menghitung gaya. Inilah keunggulan utamanya dibandingkan CSS statis — tidak perlu mengganti kelas.
Pemberian Tema dengan ThemeProvider
Styled-components dan Emotion sama-sama mendukung ThemeProvider yang menyuntikkan nilai tema ke semua komponen bergaya.
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;
`;Memperluas Komponen Bergaya
Perluas komponen bergaya yang sudah ada untuk membuat varian tanpa menggandakan gaya.
const Button = styled.button`
padding: 8px 16px;
border-radius: 4px;
`;
const DangerButton = styled(Button)`
background: #e53e3e;
color: white;
`;Gaya Global
Gunakan createGlobalStyle (styled-components) atau Global (Emotion) untuk CSS global seperti gaya elemen body dan pengaturan ulang.
import { createGlobalStyle } from 'styled-components';
const GlobalStyle = createGlobalStyle`
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: system-ui; }
`;
<><GlobalStyle /><App /></>Biaya Waktu Proses CSS-in-JS
Pustaka CSS-in-JS menyuntikkan gaya saat waktu proses melalui JavaScript. Hal ini menambah beban CPU untuk mengurai dan menyuntikkan gaya, serta menambah ukuran bundel JavaScript. Alternatif tanpa waktu proses (vanilla-extract, linaria) menghasilkan CSS statis saat proses build.
Alternatif Tanpa Waktu Proses
vanilla-extract: tulis gaya dalam TypeScript, lalu kompilasikan menjadi CSS statis. linaria: sintaks CSS-in-JS yang dikompilasi menjadi CSS Modules. Keduanya memberikan kemudahan CSS-in-JS tanpa beban waktu proses.
TypeScript dengan styled-components
Tentukan ThemeType dan perluas antarmuka DefaultTheme dari styled-components untuk mendapatkan tema yang sepenuhnya bertipe.
import 'styled-components';
import { theme } from './theme';
declare module 'styled-components' {
export interface DefaultTheme extends typeof theme {}
}Kapan Memilih CSS-in-JS
CSS-in-JS sangat baik untuk: gaya dinamis yang digerakkan oleh nilai JavaScript saat waktu proses, sistem desain dengan kebutuhan tema yang kuat, serta tim yang lebih menyukai alur kerja yang mengutamakan JS. Biaya waktu proses biasanya dapat diterima untuk antarmuka pengguna yang tidak kritis terhadap performa.
Pemeriksaan Singkat
Apa kompromi utama pustaka CSS-in-JS saat waktu proses dibandingkan solusi CSS statis?
Ringkasan: CSS-in-JS
Styled-components: literal templat bertag yang merender elemen React bergaya. Emotion: prop css atau API styled. Gaya dinamis dari properti menghilangkan kebutuhan mengganti kelas. ThemeProvider menyuntikkan nilai tema. createGlobalStyle untuk CSS global. Biaya waktu proses adalah kompromi utama. Alternatif tanpa waktu proses: vanilla-extract, linaria.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “CSS-in-JS: Styled-components dan Emotion” gratis?
Ya — teks lengkap “CSS-in-JS: Styled-components dan Emotion” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “CSS-in-JS: Styled-components dan Emotion”?
Tulis style komponen sebagai template literal bertag dengan styled-components atau prop css dengan Emotion, dan gunakan props untuk style dinamis. Kamu berlatih Frontend 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 Frontend Academy?
Tidak diperlukan pengalaman sebelumnya. Frontend 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 3 dari 4.
Berapa lama pelajaran “CSS-in-JS: Styled-components dan Emotion” 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 Frontend Academy ini?
Ya. Setiap pelajaran Frontend 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
- Metodologi BEM: Block, Element, Modifier
- Modul CSS: Nama Class Berscope
- CSS-in-JS: Styled-components dan Emotion
- Pendekatan Utility-First Tailwind CSS