Sambungan Pembelajaran Penggayaan dengan CSS modules React

Mari teruskan kerja pada aplikasi kami buttons. Sekarang kita akan menguruskan komponen utama App, yang telah dijana dalam folder src pada mulanya. Di dalamnya, kita akan ada dua div, tajuk dan butang.

Tukar nama fail App.css kepada App.module.css mengikut konvensyen, kosongkannya dan buat beberapa kelas dengan gaya CSS untuk tag di dalamnya:

.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 kosongkan kandungan fail App.js. Kemudian import komponen React Buttons dan gaya dari App.module.css. Tulis tag kami dan gunakan gaya pada mereka, serta letakkan 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 perkataan classes untuk nama objek yang mengandungi gaya, yang kami import dari App.module.css. Seperti dalam kes sebelumnya, anda boleh namakan objek ini seperti yang anda suka.

Tinggal beberapa langkah kecil lagi. Tukar nama fail index.css mengikut konvensyen kepada index.module.css dan dalam fail index.js jangan lupa untuk menukar baris import:

import "./index.css";

Kepada baris:

import "./index.module.css";

Sekarang kita boleh melihat dalam pelayar hasil kerja aplikasi kami.

Jika anda membuka penjanaan markup dalam panel pembangun di pelayar, anda akan lihat bahawa setiap komponen mempunyai kelas uniknya sendiri. Dengan demikian, kami tidak perlu lagi risau tentang konflik antara kelas komponen individu.

Penting juga untuk diperhatikan bahawa CSS modules tidak melarang import fail CSS luaran biasa.

Mengikut teori dari pelajaran, kosongkan komponen React App aplikasi anda inputs, yang anda buat dalam tugasan untuk pelajaran lepas, dan juga letakkan di dalamnya, Inputs yang dicipta oleh anda, dalam beberapa div bergaya. Tambahkan dalam App tajuk bergaya. Semua ini masukkan ke dalam div lain. Gaya untuk tag komponen React App tulis dalam App.modules.css.

Kumpulkan semuanya, sambungkan dengan betul baki fail dan lancarkan aplikasi anda inputs.