CSS moduļu izmantošanas sākums stila veidošanā React

Šajā un turpmākajās nodarbībās mēs apskatīsim vēl vienu mūsdienīgu un efektīvu pieeju React komponentu stila veidošanai - CSS moduļu izmantošanu.

CSS moduļi šajā pieejā ir atsevišķi kompilēti CSS faili, kuros klases un animāciju nosaukumi atrodas lokālajā darbības jomā, kas ļauj izvairīties no nosaukumu konfliktiem starp dažādu komponentu klasēm.

Lai sāktu, izveidosim un palaidīsim mūsu vienkāršo React lietotni buttons. Lai to izdarītu, izveidosim tukšu mapi test, iekļūsim tajā un terminālī ierakstīsim šādas komandas:

npx create-react-app buttons
cd buttons
npm start

Ja jums ir jauna React versija, tas ir, tā atbalsta Create React App v2 un augstāk, tad nekādu papildu iestatījumu nav jāveic, jo šajā gadījumā CSS moduļi tiks atbalstīti automātiski. Lai pārbaudītu, ieskatieties package.json, ja atkarība react-scripts ir versijā 2.x.x un augstāk, tad viss ir kārtībā. Pretējā gadījumā atjauniniet savu React.

Mūsu lietotne stila veidošanai ar CSS moduļu metodi saturēs trīs pogas.

CSS failus mēs nosauksim, ievērojot vienošanos, šādi: [name].module.css.

Tagad izveidosim mapi components src, un tajā pievienosim failu Buttons.module.css ar CSS stiliem mūsu pogām:

.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;
}

Arī mapē components, izveidosim tukšu React komponenta failu Buttons.js, bet pagaidā neaiztieciet ģenerēto failu App.js, mēs to pieskarsim vēlāk!

Buttons.js noteikti importējiet failu ar CSS stiliem, kā arī izmantojiet šos stilus katrai pogai, izmantojot atribūtu 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;

Starp citu, nav obligāti jālieto vārds styles importējamā objekta nosaukumam ar stiliem, jūs varat to nosaukt, kā jums ir ērti.

Nākamajā nodarbībā mēs pabeigsim mūsu lietotni.

Ievērojot šīs nodarbības teoriju, ģenerējiet React lietotni inputs.

Izmantojiet nodarbībā norādīto CSS moduļu pieeju. Izveidojiet src lietotnē inputs failu Inputs.js React komponentam Inputs, kas saturēs trīs ievades laukus. Uzrakstiet pāris stilus Inputs.modules.css ievades laukiem. Importējiet šo failu Inputs.js un piemērojiet stilus.