Η εντολή composes για κλάσεις σε CSS modules στο React

Σε αυτό το μάθημα θα εξετάσουμε μια πολύ χρήσιμη τεχνική για την επαναχρησιμοποίηση CSS στυλ μιας κλάσης σε άλλη σε 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;
}

Ας υποθέσουμε ότι θέλουμε όλα τα κουμπιά να έχουν την ίδια στρογγυλεμένη γωνία και μέγεθος γραμματοσειράς. Φυσικά, θα μπορούσαμε να επαναλαμβάνουμε τις ίδιες ιδιότητες σε κάθε κλάση. Αλλά χάρη στην εντολή composes των CSS modules, θα δράσουμε διαφορετικά.

Αρχικά, ας δημιουργήσουμε μια ακόμη κλάση, για παράδειγμα 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 επαναλάβετε τα σε όλες τις άλλες κλάσεις για τα πεδία εισαγωγής.