Melanjutkan Pembelajaran Styling dengan CSS modules React

Mari lanjutkan pekerjaan pada aplikasi kita buttons. Sekarang kita akan menangani komponen utama App, yang telah digenerate di folder src sejak awal. Di dalamnya akan ada dua div, judul dan tombol.

Ganti nama file App.css menjadi App.module.css sesuai konvensi, bersihkan isinya dan buat beberapa kelas dengan style CSS untuk tag:

.app {
	display: flex;
	flex-direction: column;
	width: 300px;
	border: 1px solid brown;
	padding: 10px;
}

.wrapper {
	display: flex;
	justify-content: space-around;
}

.title {
	text-align: center;
	margin-top: 10px;
}

Dan sekarang bersihkan isi file App.js. Kemudian import komponen React Buttons dan style dari App.module.css. Tulis tag kita dan terapkan style kepada mereka, serta tempatkan komponen React Buttons:

import classes from "./App.module.css"; 
import Buttons from "./components/Buttons"; 

function App() {
	return (
		<div class={classes.app}>
			<h2 class={classes.title}>CSS Module Buttons</h2>
			<div class={classes.wrapper}>
				<Buttons />
			</div>
		</div>
	);
}
export default App;

Kami menggunakan kata classes untuk nama objek yang berisi style, yang kita import dari App.module.css. Seperti pada kasus sebelumnya, Anda bisa memberi nama objek ini sesuai keinginan Anda.

Tinggal beberapa langkah kecil lagi. Ubah nama file index.css sesuai konvensi menjadi index.module.css dan di file index.js jangan lupa ganti baris import:

import "./index.css";

Menjadi baris:

import "./index.module.css";

Sekarang kita bisa melihat di browser hasil kerja aplikasi kita.

Jika Anda membuka markup yang dihasilkan di panel developer di browser, Anda akan melihat bahwa setiap komponen memiliki kelas uniknya sendiri. Dengan demikian, kita tidak perlu lagi khawatir tentang konflik antara kelas dari komponen yang terpisah.

Yang penting juga adalah CSS modules tidak melarang untuk mengimport file CSS eksternal biasa.

Mengikuti teori dari pelajaran, bersihkan komponen React App dari aplikasi Anda inputs, yang Anda buat di tugas pelajaran sebelumnya, serta tempatkan di dalamnya, Inputs yang telah Anda buat, di dalam div yang telah distyle. Tambahkan ke App judul yang telah distyle. Semua ini masukkan ke dalam div lain. Style untuk tag komponen React App tulis di App.modules.css.

Kumpulkan semuanya, hubungkan dengan benar file-file yang tersisa dan jalankan aplikasi Anda inputs.