Styling Komponen — React

React komponen-based, tapi CSS sifatnya GLOBAL secara default — class .btn di file A bisa nabrak class .btn di file B. Perang specificity, override…

Ada dua cara dasar memberi gaya ke komponen React: className, yang menunjuk ke class di file CSS, dan style, yang menerima object JavaScript berisi gaya untuk satu elemen. Bayangin lemari baju. className itu menyebut nama setelan yang sudah disiapkan di lemari (file CSS): "pakai setelan badge-success". style itu menempelkan satu detail langsung ke satu baju, tanpa lewat lemari. Dan karena komponen itu function, kamu bisa memilih setelannya dari prop, kayak memilih baju sesuai cuaca.

🧪 Tebakan cepat: di JSX kamu menulis <div style="color: red">Halo</div>, persis seperti di HTML. Teksnya jadi merah, atau React menolak? Tebak dulu, jawabannya ada di bagian "Inline style: object, bukan string".

className, bukan class

Di HTML kamu menulis class="...". Di JSX, atributnya className, karena class adalah kata kunci JavaScript untuk membuat class.

/* Badge.css */
.badge-success { background: #dcfce7; color: #166534; }
.badge-error   { background: #fee2e2; color: #991b1b; }

import "./Badge.css"

function App() {
  return <span className="badge-success">Berhasil</span>
}

import "./Badge.css" memasang file CSS-nya sekali. Class di dalamnya berlaku untuk seluruh halaman.
className="badge-success" jadi class="badge-success" di HTML yang dihasilkan, jadi aturan .badge-success di CSS kena ke elemen itu.

Inline style: object, bukan string

function App() {
  return (
    <div id="box" style={{ backgroundColor: "skyblue", padding: "20px" }}>
      Kotak Biru
    </div>
  )
}

Kurung kurawal luar berarti "ini ekspresi JavaScript", sama seperti {count}. Kurung kurawal dalam adalah object-nya. Makanya kelihatan dobel: style={{ ... }}.
Nama propertinya camelCase: background-color di CSS jadi backgroundColor. Tanda minus gak boleh ada di nama properti object.
Nilainya string lengkap dengan satuan: "20px", "skyblue". Untuk ukuran, angka polos juga boleh: padding: 20 dibaca React sebagai 20px.
Pemisahnya titik dua dan koma, seperti object biasa, bukan = atau titik koma.

Di file CSS	Di `style={{ }}`
`background-color: skyblue;`	`backgroundColor: "skyblue"`
`padding: 20px;`	`padding: "20px"`
`font-size: 24px;`	`fontSize: "24px"`
`color: red;`	`color: "red"`

Kalau style diberi string seperti style="color: red", React menolak merender dan melempar error: style harus berupa object, bukan string. Itu jawaban tebakannya. Versi yang benar: style={{ color: "red" }}.

Kelas yang berubah sesuai prop

function Badge({ type, children }) {
  return (
    <span className={type === "success" ? "badge-success" : "badge-error"}>
      {children}
    </span>
  )
}

function App() {
  return <Badge type="success">Berhasil</Badge>
}

className={...} memakai kurung kurawal, jadi isinya ekspresi yang dihitung ulang tiap render. className="badge-success" dengan tanda kutip selalu sama, apa pun type-nya.
type === "success" ? "badge-success" : "badge-error" memilih nama class dengan ternary, persis seperti di pelajaran conditional rendering.
{children} adalah apa yang dibungkus <Badge>, di sini teks Berhasil.

Hasil render-nya: <span class="badge-success">Berhasil</span>, hijau. Ganti jadi type="error", dan hasilnya <span class="badge-error">, merah.

Kalau ada bagian class yang tetap, gabungkan dengan template literal: className={`badge ${aktif ? "badge-aktif" : ""}`}.

📌 Cara lain di project besar

Class di file CSS biasa berlaku global: .badge di dua file berbeda bisa saling timpa. Dua cara populer mengatasinya, dan dua-duanya tetap lewat className:

CSS Modules: file Badge.module.css di-import jadi object, lalu className={styles.success}. Nama class-nya dibuat unik otomatis per file.
Tailwind: gaya ditulis dengan class kecil siap pakai, misalnya className="px-4 py-2 rounded bg-sky-200", tanpa menulis file CSS sendiri.

⚠️ Jebakan yang sering ketemu

style berupa string. style="color: red" bikin React melempar error. Tulis object: style={{ color: "red" }}.
Nama properti pakai tanda minus. {{ font-size: "20px" }} adalah syntax error JavaScript. Tulis fontSize. Begitu juga {{ margin = "8px" }}: object pakai titik dua, {{ margin: "8px" }}.
:hover dan @media di inline style. Inline style gak bisa memakainya. Taruh gaya seperti itu di class CSS.
className ditulis tetap padahal harus ikut prop. className="badge-success" membuat badge error tetap hijau. Hitung dari prop: className={type === "success" ? "badge-success" : "badge-error"}.

TL;DR: Di JSX, atribut class ditulis className, dan class-nya didefinisikan di file CSS. Inline style adalah object di dalam kurung kurawal ganda: style={{ backgroundColor: "skyblue", padding: "20px" }}, nama properti camelCase, nilai string dengan satuan, bukan string CSS seperti "color: red" (React melempar error). Class yang bergantung prop dihitung dengan ekspresi: className={type === "success" ? "badge-success" : "badge-error"}. Inline style gak bisa :hover atau @media, jadi gaya seperti itu masuk class. Project besar sering memakai CSS Modules atau Tailwind, tetap lewat className.