CSS di React: className, Style Inline, CSS Modules, Tailwind

Komponen React diberi style dengan CSS biasa. Beri elemen sebuah class dengan prop className dan tulis aturannya di stylesheet, pakai prop style untuk nilai yang berasal dari JavaScript, dan gunakan CSS Modules atau Tailwind saat proyek makin besar. Contoh di bawah mendefinisikan CSS-nya di dalam elemen <style> agar bisa berjalan di halaman ini; di sebuah proyek, CSS itu akan berada di file .css.

export default function App() {
    return (
        <div>
            <style>{`
                .card { border: 1px solid #ddd; border-radius: 10px; padding: 16px; max-width: 280px; }
                .card-title { margin: 0 0 8px; font-size: 18px; }
                .btn { background: #2563eb; color: white; border: 0; border-radius: 6px; padding: 8px 14px; }
            `}</style>
            <div className="card">
                <h3 className="card-title">Pro plan</h3>
                <p>Unlimited lessons and projects.</p>
                <button className="btn">Upgrade</button>
            </div>
        </div>
    );
}

Ganti #2563eb menjadi #16a34a di aturan .btn dan tombolnya berubah hijau. Semua yang kamu tahu tentang CSS tetap berlaku: selector, media query, state hover, animasi.

className, bukan class

JSX dikompilasi menjadi JavaScript, dan di sana class adalah kata kunci yang dicadangkan, jadi React memakai className, nama yang dipakai DOM sendiri untuk property itu (element.className). Browser tetap menerima atribut class biasa. Penggantian nama yang sama berlaku untuk htmlFor sebagai pengganti for pada label. React 19 menerima class dengan peringatan di development, tapi className adalah nama yang benar dan yang dipakai di setiap codebase.

className menerima string, jadi beberapa class dipisahkan spasi: className="btn btn-primary". Karena nilainya adalah JavaScript, nilai itu bisa dihitung.

Class kondisional

Untuk menambahkan class hanya dalam kasus tertentu, susun string-nya dengan ternary atau template literal. Tab bar yang menyorot tab terpilih adalah contoh klasiknya.

import { useState } from 'react';

const TABS = ['Overview', 'Lessons', 'Reviews'];

export default function App() {
    const [active, setActive] = useState('Overview');

    return (
        <div>
            <style>{`
                .tab { border: 0; background: none; padding: 8px 12px; border-bottom: 2px solid transparent; }
                .tab.active { border-bottom-color: #2563eb; color: #2563eb; font-weight: 600; }
                .tab.disabled { color: #aaa; }
            `}</style>
            {TABS.map((tab) => (
                <button
                    key={tab}
                    className={`tab ${tab === active ? 'active' : ''} ${tab === 'Reviews' ? 'disabled' : ''}`}
                    disabled={tab === 'Reviews'}
                    onClick={() => setActive(tab)}
                >
                    {tab}
                </button>
            ))}
            <p>Showing: {active}</p>
        </div>
    );
}

Klik Lessons dan garis bawahnya berpindah, karena sekarang hanya string milik tombol itu yang berisi active. Reviews mendapat class disabled dan atribut disabled, jadi tombol itu abu-abu dan mengabaikan klik. Template literal meninggalkan spasi ekstra saat sebuah kondisi bernilai false, dan browser mengabaikannya. Saat sebuah komponen punya banyak class kondisional, array lebih rapi:

const classes = ['tab', isActive && 'active', isDisabled && 'disabled']
    .filter(Boolean)
    .join(' ');

Banyak proyek memakai package kecil clsx untuk tugas yang sama: clsx('tab', { active: isActive, disabled: isDisabled }).

Prop style

Prop style menerima object JavaScript, bukan string. Itulah sebabnya ada kurung kurawal ganda: pasangan luar membuka ekspresi JavaScript, pasangan dalam adalah object literal. Nama property ditulis dalam camelCase (backgroundColor, fontSize, borderRadius), dan nilainya berupa string atau angka. Angka pada property panjang menjadi piksel, jadi padding: 12 berarti 12px.

Style inline paling berguna saat sebuah nilai dihitung saat render, seperti lebar progress bar.

import { useState } from 'react';

export default function App() {
    const [percent, setPercent] = useState(30);
    const done = percent >= 100;

    return (
        <div style={{ maxWidth: 320 }}>
            <div style={{ height: 12, background: '#e5e7eb', borderRadius: 6, overflow: 'hidden' }}>
                <div
                    style={{
                        width: percent + '%',
                        height: '100%',
                        backgroundColor: done ? '#16a34a' : '#2563eb',
                        transition: 'width 0.3s',
                    }}
                />
            </div>
            <p style={{ fontSize: 14, opacity: 0.8 }}>{percent}% complete</p>
            <button onClick={() => setPercent(Math.min(100, percent + 10))}>Add 10%</button>{' '}
            <button onClick={() => setPercent(0)}>Reset</button>
        </div>
    );
}

Klik Add 10% sampai bar-nya penuh dan warnanya berubah hijau. Perhatikan width: percent + '%': angka saja akan berarti piksel, jadi satuan selain px ditulis dalam string. Property tanpa satuan tetap berupa angka biasa, seperti opacity: 0.8, zIndex: 2, flexGrow: 1, dan lineHeight: 1.5 (yang merupakan pengali, bukan piksel).

Style inline punya batasan. Style inline tidak bisa menyatakan :hover, :focus, media query, atau animasi keyframe, dan setiap elemen membawa salinan aturannya sendiri. Pakai untuk nilai dinamis dan simpan sisanya di CSS.

Variabel CSS dari props

Jalan tengah yang bagus adalah mengatur CSS custom property di style lalu memakainya dari stylesheet. Aturannya tetap di CSS, termasuk state hover, dan hanya nilainya yang berasal dari JavaScript.

import { useState } from 'react';

export default function App() {
    const [accent, setAccent] = useState('#2563eb');

    return (
        <div style={{ '--accent': accent }}>
            <style>{`
                .pill { border: 2px solid var(--accent); color: var(--accent); background: none;
                        border-radius: 999px; padding: 6px 14px; }
                .pill:hover { background: var(--accent); color: white; }
            `}</style>
            <label>
                Accent color <input type="color" value={accent} onChange={(e) => setAccent(e.target.value)} />
            </label>
            <p>
                <button className="pill">Follow</button> <button className="pill">Share</button>
            </p>
        </div>
    );
}

Pilih warna baru dan kedua tombol mengikutinya, dan warna isi saat hover tetap berfungsi karena itu CSS biasa. Nama custom property tetap memakai tanda hubungnya di object style, jadi namanya ditulis dalam tanda kutip: { '--accent': accent }.

File CSS

Di proyek sungguhan, kamu menulis style di file .css dan meng-import-nya dari komponen yang membutuhkannya. Dengan Vite, import saja sudah cukup: build tool melihat import './Button.css', menambahkan stylesheet ke halaman selama development, dan membundelnya menjadi file CSS untuk production. Tidak ada export yang dipakai; import itu ada hanya untuk efek sampingnya.

// Button.jsx
import './Button.css';

export default function Button({ children }) {
    return <button className="button">{children}</button>;
}

/* Button.css */
.button {
    background: #2563eb;
    color: white;
    border-radius: 6px;
}

Masalahnya, setiap stylesheet yang di-import bersifat global. Aturan .button di Button.css memberi style pada setiap elemen dengan class itu, di mana pun di aplikasi, dan dua file yang sama-sama mendefinisikan .title akan saling menimpa. Tim mengatasi ini dengan konvensi penamaan seperti BEM (.card__title), atau dengan CSS Modules.

CSS Modules

File yang berakhiran .module.css adalah CSS Module. Meng-import-nya memberimu object yang memetakan setiap nama class yang kamu tulis ke nama unik yang dibuat otomatis, jadi sebuah class hanya bisa berlaku di tempat kamu memakainya. Vite dan Next.js mendukung ini tanpa setup.

// Card.jsx
import styles from './Card.module.css';

export default function Card({ title, children, featured }) {
    return (
        <section className={featured ? `${styles.card} ${styles.featured}` : styles.card}>
            <h3 className={styles.title}>{title}</h3>
            {children}
        </section>
    );
}

/* Card.module.css */
.card { border: 1px solid #ddd; border-radius: 10px; padding: 16px; }
.featured { border-color: #2563eb; }
.title { margin: 0; }

Di browser, class-nya muncul sebagai sesuatu seperti _card_1x2ab_1. Komponen lain bisa mendefinisikan .title miliknya sendiri dan keduanya tidak akan pernah bentrok. Kamu menulis CSS biasa, termasuk aturan hover dan media query, itulah sebabnya CSS Modules sering menjadi pilihan default untuk style komponen.

Tailwind CSS dengan React

Tailwind memakai pendekatan berbeda: alih-alih menulis aturan, kamu menyusun class utility kecil langsung di className. px-4 mengatur padding horizontal, rounded-lg membulatkan sudut, hover:bg-blue-700 mengubah background saat hover. Tailwind memindai file-filemu dan hanya membuat CSS untuk class yang kamu pakai.

Memasangnya di aplikasi React dengan Vite (Tailwind v4) butuh tiga langkah:

npm install tailwindcss @tailwindcss/vite

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
    plugins: [react(), tailwindcss()],
});

/* src/index.css, imported from main.jsx */
@import "tailwindcss";

Lalu beri style pada komponen dengan class:

function UpgradeCard({ active }) {
    return (
        <div className="max-w-xs rounded-xl border border-gray-200 p-4">
            <h3 className="mb-2 text-lg font-semibold">Pro plan</h3>
            <button
                className={`rounded-md px-4 py-2 text-white ${active ? 'bg-green-600' : 'bg-blue-600 hover:bg-blue-700'}`}
            >
                {active ? 'Active' : 'Upgrade'}
            </button>
        </div>
    );
}

Tailwind tidak tersedia di editor halaman ini, jadi contohnya ditampilkan sebagai kode statis. Class kondisional bekerja persis seperti di contoh tab di atas, tapi tulis setiap nama class secara utuh: Tailwind menemukan class dengan memindai teks sumbermu, jadi nama yang dirakit saat runtime seperti `bg-${color}-600` tidak akan pernah dibuat.

Kapan memakai yang mana

• File CSS biasa cocok untuk aplikasi kecil dan style global (reset, font, layout halaman). Waspadai bentrokan nama class saat aplikasi makin besar.
• CSS Modules cocok untuk sebagian besar style komponen: CSS biasa, otomatis ber-scope, tanpa library tambahan.
• Tailwind cocok untuk tim yang lebih suka memberi style di markup dan ingin skala desain bersama untuk jarak dan warna.
• Prop style untuk nilai yang dihitung saat render: lebar, posisi, warna pilihan pengguna. Pasangkan dengan variabel CSS agar aturan hover dan media tetap di CSS.

Kamu bisa mencampurnya. Aplikasi pada umumnya punya satu stylesheet global, CSS Modules atau Tailwind untuk komponen, dan beberapa style inline untuk nilai dinamis. Library CSS-in-JS seperti styled-components dan Emotion adalah pilihan lain yang akan kamu temui di codebase lama. Halaman tentang cara menginstal React menunjukkan cara memulai proyek Vite tempat semua cara ini berfungsi.