კომპოზიციების ბრძანება კლასებისთვის CSS მოდულებში React-ში

ამ გაკვეთილში ჩვენ განვიხილავთ ძალიან სასარგებლო ტექნიკას CSS სტილების გადამოყენებისთვის ერთი კლასიდან მეორეში CSS მოდულებში.

დავუბრუნდეთ აპლიკაციას buttons, რომელიც ჩვენ გავაკეთეთ წინა გაკვეთილებზე. ჩავხედოთ ფაილს Buttons.module.css:

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

დავუშვათ, ჩვენ გვსურს, რომ ყველა ღილაკს ჰქონდეს იგივე მომრგვალებული კუთხეები და ტექსტის ზომა. რა თქმა უნდა, შესაძლებელი იქნებოდა ყველა კლასში ერთი და იგივე თვისებების დამატება. მაგრამ composes ბრძანების წყალობით CSS მოდულებიდან, ჩვენ სხვაგვარად ვიმოქმედებთ.

დასაწყისისთვის შევქმნათ კიდევ ერთი კლასი, მაგალითად common-btn, რომელშიც ჩავსვამთ ამ ერთნაირ თვისებებს. და რომ გამოვიყენოთ ამ კლასის თვისებები სხვებში, საჭიროა მათში გამოვიყენოთ სინტაქსი:

სელექტორი {
	composes: კლასის სახელი;
}

ახლა ჩვენი Buttons.module.css-ის კოდი ასე გამოიყურება:

.common-btn {
	font-size: 16px;
	border-radius: 3px;
}

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

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

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

აიღეთ თქვენი React აპლიკაცია inputs, რომელიც თქვენ გააკეთეთ წინა გაკვეთილების ამოცანებში. დაამატეთ ყველა ინფუთისთვის რამდენიმე ერთნაირი CSS სტილი ერთი და იგივე მნიშვნელობებით. შექმენით დამატებითი კლასი, რომელშიც იქნება ეს სტილები. composes-ის გამოყენებით გაავრცელეთ ისინი ყველა სხვა ინფუთების კლასებში.