Memulakan Pembelajaran Penggayaan dengan CSS modules dalam React

Dalam pelajaran ini dan seterusnya, kita akan mempertimbangkan satu lagi pendekatan moden dan berkesan untuk menggayakan komponen React - penggunaan modul CSS.

Modul CSS dalam pendekatan ini adalah fail CSS yang disusun secara berasingan, di mana nama kelas dan animasi berada dalam skop lokal, yang membolehkan mengelakkan konflik antara nama kelas dari komponen yang berbeza.

Untuk memulakan, mari kita cipta dan lancarkan aplikasi React sederhana kita buttons. Untuk itu, buat folder kosong test, masuk ke dalamnya dan dalam terminal tulis arahan berikut:

npx create-react-app buttons
cd buttons
npm start

Jika anda mempunyai versi React yang terkini, iaitu ia menyokong Create React App v2 dan ke atas, maka tiada tetapan tambahan yang perlu dibuat, kerana dalam kes ini modul CSS akan disokong secara automatik. Untuk menyemak, lihat ke dalam package.json, jika kebergantungan react-scripts versi 2.x.x dan ke atas, maka semuanya baik. Jika tidak, kemas kini React anda.

Aplikasi kita untuk penggayaan dengan cara modul CSS akan mengandungi tiga butang.

Kita akan menamakan fail CSS, dengan mematuhi perjanjian, seperti berikut: [name].module.css.

Sekarang mari kita buat folder components dalam src, dan tambahkan padanya fail Buttons.module.css dengan gaya CSS untuk butang kita:

.btn1 {
	background-color: orange;
	border: 2px solid brown;
	color: white;
}

.btn2 {
	background-color: red;
	border: 2px solid green;
	color: yellow;
}

.btn3 {
	background-color: brown;
	border: 2px solid yellowgreen;
	color: orange;
}

Juga dalam folder components, buat fail kosong komponen React Buttons.js, sementara itu jangan sentuh fail yang dijana App.js, kita akan mengurusnya kemudian!

Dalam Buttons.js pastikan untuk mengimport fail dengan gaya CSS, dan juga gunakan gaya ini pada setiap butang dengan menggunakan atribut class:

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

const Buttons = () => (
	<>
		<button class={styles.btn1}>btn1</button>
		<button class={styles.btn2}>btn2</button>
		<button class={styles.btn3}>btn3</button>
	</>
);

export default Buttons;

By the way, tidak semestinya menggunakan perkataan styles untuk nama objek gaya yang diimport, anda boleh menamakannya, seperti yang anda suka.

Dalam pelajaran seterusnya, kita akan menyelesaikan aplikasi kita.

Mengikut teori untuk pelajaran ini, hasilkan aplikasi React inputs.

Gunakan pendekatan modul CSS, yang diberikan dalam pelajaran. Cipta dalam src aplikasi inputs fail Inputs.js untuk komponen React Inputs, yang akan mengandungi tiga input. Tulis beberapa gaya dalam Inputs.modules.css untuk input. Import fail ini ke dalam Inputs.js dan gunakan gaya.