CSS modules හි React හි පංති සඳහා compores විධානය

මෙම පාඩමෙන්, CSS modules හි එක් පංතියක විලාසිතා තවත් පංතියක පුනර්භාවිතය සඳහා ඉතා ප්‍රයෝජනවත් තාක්ෂණයක් අපි සලකා බලමු.

අපි කලින් පාඩම්වලදී හැදු 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;
}

අපට අවශ්‍ය යැයි සිතමු, සියලු බොත්තම්වලට එකම වටකුරු ආකෘතිය සහ අකුරු ප්‍රමාණය තිබීම. ඇත්ත වශයෙන්ම, සෑම පංතියකම එකම ගුණාංග ලිවීමට හැකිය. නමුත් CSS modules හි composes විධානයට ස්තූතියි, අපි වෙනස් ආකාරයකින් ක්‍රියා කරමු.

පළමුව, අපි තවත් පංතියක් සාදන්න, උදාහරණයක් ලෙස 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 භාවිතා කරමින් ඒවා සියලු අනෙකුත් ආදාන පංතිවලට පතුරුවන්න.