CSS մոդուլներով React-ի սթայլիզացիայի ուսումնասիրության շարունակություն

Շարունակենք աշխատանքը մեր buttons հավելվածի վրա։ Այժմ զբաղվենք հիմնական App կոմպոնենտով, որն արդեն սկզբնապես գեներացված էր src պանակում։ Դրանում կունենանք երկու դիվ, վերնագիր և կոճակ։

App.css ֆայլի անվանումը փոխարինենք App.module.css-ով համաձայն պայմանավորվածության, մաքրենք այն և դրանում ստեղծենք մի քանի դասեր CSS սթայլերով տեգերի համար։

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

Եվ հիմա մաքրենք App.js ֆայլի պարունակությունը։ Ապա իմպորտ անենք React կոմպոնենտ Buttons և սթայլերը App.module.css-ից։ Գրենք մեր տեգերը և կիրառենք դրանց վրա սթայլերը, ինչպես նաև տեղադրենք 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;

Մենք օգտագործեցինք classes բառը այն օբյեկտի անվանման համար, որը պարունակում է սթայլերը, որոնք մենք իմպորտում ենք App.module.css-ից։ Ինչպես նախորդ դեպքում, դուք կարող եք այդ օբյեկտը անվանել ինչպես ձեզ հարմար է։

Մնացել է մի քանի փոքր քայլ։ Փոխենք index.css ֆայլի անվանումը համաձայն պայմանավորվածության index.module.css-ի և index.js ֆայլում չմոռանանք փոխարինել իմպորտի տողը։

import "./index.css";

Ստեղծված տողով։

import "./index.module.css";

Այժմ մենք կարող ենք տեսնել բրաուզերում մեր հավելվածի աշխատանքի արդյունքը։

Եթե դուք բացեք գեներացված վերստը մշակման վահանակում բրաուզերում, դուք կտեսնեք, որ յուրաքանչյուր կոմպոնենտի համար գեներացված են իրենց ունիկալ դասերը։ Այսպիսով, մեզ այլևս պետք չէ անհանգստանալ առանձին կոմպոնենտների դասերի միջև կոնֆլիկտների մասին։

Կարևոր է նաև, որ CSS մոդուլները չեն արգելում իմպորտել նաև սովորական արտաքին CSS ֆայլեր։

Դասի տեսությունից ելնելով, մաքրեք ձեր inputs հավելվածի React կոմպոնենտ App-ը, որը դուք ստեղծել էիք նախորդ դասի առաջադրանքներում, և նաև տեղադրեք դրանում ձեր կողմից ստեղծված Inputs-ը ինչ-որ սթայլիզացված դիվում։ App-ին ավելացրեք սթայլիզացված վերնագիր։ Այս ամենը տեղադրեք մեկ այլ դիվում։ App React կոմպոնենտի տեգերի համար սթայլերը գրեք App.modules.css-ում։

Հավաքեք ամեն ինչ միասին, ճիշտ միացրեք մնացած ֆայլերը և գործարկեք ձեր հավելվածը inputs։