CSS Modules

CSS Modules di React

CSS Modules adalah cara styling di React yang membuat setiap class CSS bersifat lokal — tidak akan bentrok dengan class di komponen lain, bahkan jika namanya sama.

Cara Menggunakan

Buat file dengan akhiran .module.css:

/* Button.module.css */
.button {
  background: #7c5cfc;
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
}

.button:hover {
  background: #6d4ff0;
}

Kemudian import dan gunakan di komponen:

import styles from "./Button.module.css";

function Button({ label }) {
  return (
    <button className={styles.button}>
      {label}
    </button>
  );
}

Keunggulan CSS Modules

• Scoped — Nama class dikompilasi menjadi hash unik, tidak ada konflik
• Explicit — Jelas style mana yang dipakai komponen mana
• Dapat digabung — Bisa mengkombinasikan beberapa class dengan mudah

Multiple Classes

// Menggabungkan beberapa class
<button className={`${styles.button} ${styles.primary}`}>
  Klik
</button>

// Atau gunakan library classnames
import cx from "classnames";
<button className={cx(styles.button, { [styles.active]: isActive })}>