Cara Membuat Style Komponen React Menggunakan Modul CSS

Cara Membuat Style Komponen React Menggunakan Modul CSS

Modul CSS menyediakan cara untuk lingkup lokal nama kelas CSS. Anda tidak perlu khawatir tentang mengganti gaya saat Anda menggunakan nama kelas yang sama.





Cari tahu bagaimana modul CSS bekerja, mengapa Anda harus menggunakannya, dan bagaimana menerapkannya dalam proyek React.



Apa Itu Modul CSS?

Itu Dokumen modul CSS menggambarkan modul CSS sebagai file CSS yang nama kelasnya dicakup secara lokal secara default. Ini berarti Anda dapat menangani variabel CSS dengan nama yang sama di file CSS yang berbeda.





Anda menulis kelas modul CSS seperti kelas normal. Kemudian kompiler menghasilkan nama kelas yang unik sebelum mengirim CSS ke browser.

Misalnya, pertimbangkan kelas .btn berikut dalam file bernama styles.modules.css:



cara mengetahui apakah tautan aman 
.btn { 
    width: 90px; 
    height: 40px; 
    padding: 10px 20px; 
}

Untuk menggunakan file ini, Anda harus mengimpornya ke dalam file JavaScript.

import styles from "./styles.module.js"

Sekarang, untuk mereferensikan kelas .btn dan membuatnya tersedia dalam sebuah elemen, Anda akan menggunakan kelas seperti yang ditunjukkan di bawah ini:



class="styles.btn"

Proses build akan menggantikan kelas CSS dengan nama format yang unik seperti _styles__btn_118346908.

Keunikan nama kelas berarti bahwa, bahkan jika Anda menggunakan nama kelas yang sama untuk komponen yang berbeda, mereka tidak akan bertabrakan. Anda dapat menjamin independensi kode yang lebih besar karena Anda dapat menyimpan gaya CSS komponen dalam satu file, khusus untuk komponen tersebut.



Ini menyederhanakan debugging, terutama jika Anda bekerja dengan beberapa stylesheet. Anda hanya perlu melacak modul CSS untuk komponen tertentu.

Modul CSS juga memungkinkan Anda untuk menggabungkan beberapa kelas melalui menyusun kata kunci. Sebagai contoh, perhatikan kelas .btn berikut di atas. Anda bisa 'memperluas' kelas itu di kelas lain menggunakan composes.

Untuk tombol kirim, Anda dapat memiliki:

.btn { 
    /* styles */ 
} 
  
.submit { 
    composes: btn; 
    background-color: green; 
    color:#FFFFFF 
}

Ini menggabungkan kelas .btn dan .submit. Anda juga dapat membuat gaya dari modul CSS lain seperti ini:

.submit { 
    composes:primary from "./colors.css" 
    background-color: green; 
}

Perhatikan bahwa Anda harus menulis aturan penulisan sebelum aturan lainnya.

Cara Menggunakan Modul CSS di React

Bagaimana Anda menggunakan modul CSS di React tergantung pada bagaimana Anda membuat aplikasi React.

Jika Anda menggunakan create-react-app, modul CSS disiapkan di luar kotak. Namun, jika Anda akan membuat aplikasi dari awal, Anda perlu mengonfigurasi modul CSS dengan kompiler seperti webpack.

Untuk mengikuti tutorial ini, Anda harus memiliki:

  • Node diinstal pada mesin Anda.
  • Pemahaman dasar tentang modul ES6.
  • Sebuah dasar pemahaman tentang Bereaksi .

Membuat Aplikasi React

Untuk menjaga hal-hal sederhana, Anda dapat menggunakan buat-reaksi-aplikasi untuk membuat perancah pada aplikasi React.

Jalankan perintah ini untuk buat proyek Bereaksi baru disebut react-css-modules:

npx create-react-app react-css-modules

Ini akan menghasilkan file baru bernama react-css-modules dengan semua dependensi yang diperlukan untuk memulai React.

Membuat Komponen Tombol

Anda akan membuat komponen Button dan modul CSS bernama Button.module.css pada langkah ini. Di folder src, buat folder baru bernama Components. Di folder itu buat folder lain bernama Button. Anda akan menambahkan komponen Button dan style-nya di folder ini.

Navigasi ke src/Komponen/Tombol dan buat Button.js.

export default function Button() { 
    return ( 
        <button>Submit</button> 
    ) 
}

Selanjutnya, buat file baru bernama Button.module.css dan tambahkan berikut ini.

.btn { 
    width: 90px; 
    height: 40px; 
    padding: 10px 20px; 
    border-radius: 4px; 
    border: none; 
}

Untuk menggunakan kelas ini dalam komponen Tombol, impor sebagai gaya dan referensikan dalam nama kelas elemen tombol seperti ini:

import styles from "./Button.module.css" 
  
export default function Button() { 
    return ( 
        <button className={styles.btn}>Submit</button> 
    ) 
}

Ini adalah contoh sederhana yang menunjukkan cara menggunakan satu kelas. Anda mungkin ingin berbagi gaya di berbagai komponen atau bahkan menggabungkan kelas. Untuk ini, Anda dapat menggunakan kata kunci composes seperti yang disebutkan sebelumnya dalam artikel ini.

Menggunakan Komposisi

Pertama, modifikasi komponen Button dengan kode berikut.

import styles from "./Button.module.css" 
  
export default function Button({type="primary", label="Button"}) { 
    return ( 
        <button className={styles[type]}>{label}</button> 
    ) 
}

Kode ini membuat komponen Button lebih dinamis dengan menerima nilai tipe sebagai prop. Tipe ini akan menentukan nama kelas yang diterapkan pada elemen tombol. Jadi jika tombolnya adalah tombol kirim, nama kelasnya adalah 'kirim'. Jika “error”, nama kelas akan menjadi “error”, dan seterusnya.

komputer tidak bisa boot ke bios

Untuk menggunakan kata kunci composes alih-alih menulis semua gaya untuk setiap tombol dari awal, tambahkan yang berikut ini ke Button.module.css.

.btn { 
    width: 90px; 
    height: 40px; 
    padding: 10px 20px; 
    border-radius: 4px; 
    border: none; 
} 
  
.primary { 
    composes: btn; 
    color: #FFFFFF; 
    background-color: #6E41E2; 
} 
  
.secondary { 
    composes: btn; 
    color: #6E41E2; 
    background-color: #FFFFFF; 
}

Dalam contoh ini, kelas utama dan kelas menengah menggunakan kelas btn. Dengan melakukan ini, Anda mengurangi jumlah kode yang perlu Anda tulis.

Anda dapat mengambil ini lebih jauh dengan modul CSS eksternal yang disebut colors.module.css , berisi warna yang digunakan dalam aplikasi. Anda kemudian dapat menggunakan modul ini di modul lain. Misalnya, buat file colors.module.css di root folder Components dengan kode berikut:

.primaryBg { 
    background-color: #6E41E2 
} 
.secondaryBg { 
    background-color: #FFFFFF 
} 
  
.primaryColor { 
    color: #FFFFFF 
} 
.secondaryColor { 
    color: #6E41E2 
}

Sekarang di file Button/Button.module.css, ubah kelas primer dan sekunder untuk menggunakan kelas di atas seperti ini:

.primary { 
    composes: btn; 
    composes: primaryColor from "../colors.module.css"; 
    composes: primaryBg from "../colors.module.css"; 
} 
  
.secondary { 
    composes: btn; 
    composes: secondaryColor from "../colors.module.css"; 
    composes: secondaryBg from "../colors.module.css"; 
}

Sass Dengan Modul CSS

Anda dapat menggunakan modul CSS untuk meningkatkan modularitas basis kode Anda. Sebagai contoh, Anda dapat membuat kelas CSS sederhana untuk komponen tombol dan menggunakan kembali kelas CSS melalui komposisi.

Untuk meningkatkan penggunaan modul CSS Anda, gunakan Sass. Sass—Syntactically Awesome Style Sheets—adalah praprosesor CSS yang menyediakan banyak fitur. Mereka termasuk dukungan untuk bersarang, variabel, dan pewarisan yang tidak tersedia di CSS. Dengan Sass, Anda dapat menambahkan fitur yang lebih kompleks ke aplikasi Anda.