Styling & className Dinamis

Memberi gaya dengan className, inline style, CSS Modules, dan class yang berubah.

Part 22 dari 23 ± 35 menit Gratis

Cara memberi gaya di React

Cara	Contoh	Cocok untuk
CSS biasa + `className`	`import "./App.css"`	proyek kecil, gaya global
Inline style	`style={{ color: "red" }}`	nilai dinamis sederhana
CSS Modules	`import s from "./Kartu.module.css"`	gaya terisolasi per komponen
Tailwind CSS	`className="p-4 bg-green-600"`	kelas utilitas, cepat
CSS-in-JS	styled-components, Emotion	gaya berbasis props

className

import "./App.css";

<div className="kartu aktif">...</div>

Ingat: className, bukan class.

className dinamis

Ubah kelas berdasarkan state/props dengan template literal atau ternary:

<button className={`tab ${aktif ? "aktif" : ""}`}>Semua</button>
<div className={selesai ? "tugas selesai" : "tugas"}>...</div>

Untuk kombinasi banyak kondisi, library kecil clsx merapikan:

import clsx from "clsx";
<div className={clsx("tombol", besar && "besar", error && "error")} />

Inline style untuk nilai dinamis

<div style={{ width: `${persen}%`, backgroundColor: warna }} />

Cocok untuk nilai yang dihitung (lebar progress bar, posisi). Untuk gaya statis lebih baik di CSS agar mendukung :hover, media query, dan lain-lain (yang tidak bisa di inline style).

CSS Modules

Nama class otomatis dibuat unik sehingga tidak bentrok:

/* Kartu.module.css */
.kartu { border: 1px solid #ccc; }

// Kartu.jsx
import s from "./Kartu.module.css";
<div className={s.kartu}>...</div>

Contoh: tab aktif

function TabBar() {
  const tabs = ["Semua", "Aktif", "Selesai"];
  const [aktif, setAktif] = useState("Semua");

  return (
    <div>
      {tabs.map((t) => (
        <button
          key={t}
          className={`tab ${aktif === t ? "aktif" : ""}`}
          onClick={() => setAktif(t)}
        >
          {t}
        </button>
      ))}
    </div>
  );
}

Tips

Beri nama class berdasarkan fungsi, bukan tampilan (.peringatan bukan .merah).
Simpan variabel desain (warna, jarak) sebagai CSS custom properties (--warna-utama).
Pastikan kontras warna dan fokus keyboard tetap terlihat (aksesibilitas).