Η εντολή composes για αρχεία σε CSS modules στο React

Η εντολή composes μπορεί επίσης να εφαρμοστεί για την επαναχρησιμοποίηση στυλ από ένα αρχείο σε άλλο.

Ας επιστρέψουμε στην εφαρμογή buttons, που φτιάξαμε σε προηγούμενα μαθήματα. Ας υποθέσουμε ότι θέλουμε να προσθέσουμε σε όλα τα κουμπιά τις ίδιες σκιές, στυλ δείκτη και έντονη γραμματοσειρά. Αφήστε αυτά τα στυλ να είναι τοποθετημένα στο αρχείο App.module.css. Ας ανοίξουμε αυτό το αρχείο και να προσθέσουμε στην αρχή μια νέα κλάση beauty με αυτά τα στυλ:

.beauty { 
	box-shadow: rgba(50, 50, 50, 0.2) 0 5px 5px 0;
	font-weight: bold;
	cursor: pointer;
}

Ας την εφαρμόσουμε για το στυλ των κουμπιών. Για αυτό, ας ανοίξουμε το Buttons.module.css και να κάνουμε αλλαγές στην κλάση common-btn. Θα προσθέσουμε μια γραμμή με την εντολή composes, όπου θα υποδείξουμε το όνομα της κλάσης beauty, που θέλουμε να εφαρμόσουμε και το αρχείο App.module.css, στο οποίο βρίσκεται αυτή η κλάση:

.common-btn {
	composes: beauty from "../App.module.css"; 
	font-size: 16px;
	border-radius: 3px;
}

Πάρτε τον κώδικα της εφαρμογής σας από την εργασία του προηγούμενου μαθήματος και κάντε μια σκιά στα πεδία εισαγωγής σας χρησιμοποιώντας τον τρόπο που παρουσιάζεται σε αυτό το μάθημα.