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 ფაილების იმპორტირებას.

გაკვეთილის თეორიის მიხედვით, გაასუფთავეთ React კომპონენტი App თქვენი აპლიკაციის inputs, რომელსაც აკეთებდით ამოცანებში წინა გაკვეთილისთვის, ასევე განათავსეთ მასში, თქვენს მიერ შექმნილი, Inputs რაიმე სტილიზებულ დივში. დაამატეთ App-ში სტილიზებული სათაური. ყველა ეს მოათავსეთ კიდევ რაიმე დივში. სტილები ტეგებისთვის React კომპონენტში App დაწერეთ App.modules.css-ში.

შეაერთეთ ყველაფერი ერთად, სწორად დააკავშირეთ დარჩენილი ფაილები და გაუშვით თქვენი აპლიკაცია inputs.