Komanda composes për klasat në CSS modules në React

Në këtë mësim do të shqyrtojmë një teknikë shumë të dobishme për ripërdorimin e stileve CSS nga një klasë në tjetrën në CSS modules.

Le të kthehemi te aplikacioni buttons, i cili është bërë në mësimet e mëparshme. Le të shohim skedarin 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;
}

Supozoni, ne duam që të gjitha butonat të kenë të njëjtin rrumbullakim dhe madhësi të shkronjave. Sigurisht, mund të përsëritim të njëjtat veti në çdo klasë. Por falë komandës composes nga CSS modules, ne do të veprojmë ndryshe.

Së pari, le të krijojmë një klasë tjetër, për shembull common-btn, në të cilën do të vendosim këto veti të njëjta. Dhe për të aplikuar vetitë nga kjo klasë në të tjerat, duhet të përdoret në to sintaksa:

selector {
	composes: emër klasë;
}

Tani kodi i Buttons.module.css do të duket kështu:

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

Merrni aplikacionin tuaj React inputs, që keni bërë në detyrat e mësimeve të mëparshme. Shtoni për të gjitha inputet disa stile CSS të njëjta me vlera të njëjta. Krijoni një klasë shtesë, ku do të shkruhen këto stile. Me ndihmën e composes shpërndani ato në të gjitha klasat e tjera për inputet.