Οι λειτουργικές μονάδες CSS παρέχουν έναν τρόπο τοπικού εύρους ονομάτων κλάσεων CSS. Δεν χρειάζεται να ανησυχείτε για την παράκαμψη στυλ όταν χρησιμοποιείτε το ίδιο όνομα κλάσης.

Μάθετε πώς λειτουργούν οι μονάδες CSS, γιατί πρέπει να τις χρησιμοποιήσετε και πώς να τις εφαρμόσετε σε ένα έργο React.

Τι είναι οι μονάδες CSS;

ο Έγγραφα ενοτήτων CSS Περιγράψτε μια λειτουργική μονάδα CSS ως αρχείο CSS των οποίων τα ονόματα κλάσεων έχουν τοπικό πεδίο από προεπιλογή. Αυτό σημαίνει ότι μπορείτε να απευθυνθείτε σε μεταβλητές CSS με το ίδιο όνομα σε διαφορετικά αρχεία CSS.

Γράφετε κλάσεις μονάδων CSS όπως ακριβώς και οι κανονικές τάξεις. Στη συνέχεια, ο μεταγλωττιστής δημιουργεί μοναδικά ονόματα κλάσεων πριν στείλει το CSS στο πρόγραμμα περιήγησης.

Για παράδειγμα, εξετάστε την ακόλουθη κλάση .btn σε ένα αρχείο που ονομάζεται styles.modules.css:

.btn {
 πλάτος: 90 px;
 ύψος: 40 px;
 padding: 10px 20px;
}

Για να χρησιμοποιήσετε αυτό το αρχείο, πρέπει να το εισαγάγετε σε ένα αρχείο JavaScript.

εισαγωγή στυλ από "./styles.module.js"
instagram viewer

Τώρα, για να αναφέρετε την κλάση .btn και να την καταστήσετε διαθέσιμη σε ένα στοιχείο, θα χρησιμοποιούσατε την κλάση όπως φαίνεται παρακάτω:

τάξη="styles.btn"

Η διαδικασία κατασκευής θα αντικαταστήσει την κλάση CSS με ένα μοναδικό όνομα της μορφής όπως _styles__btn_118346908.

Η μοναδικότητα των ονομάτων κλάσεων σημαίνει ότι, ακόμα κι αν χρησιμοποιείτε το ίδιο όνομα κλάσης για διαφορετικά στοιχεία, δεν θα συγκρουστούν. Μπορείτε να εγγυηθείτε μεγαλύτερη ανεξαρτησία κώδικα, καθώς μπορείτε να αποθηκεύσετε τα στυλ CSS ενός στοιχείου σε ένα μόνο αρχείο, ειδικά για αυτό το στοιχείο.

Αυτό απλοποιεί τον εντοπισμό σφαλμάτων, ειδικά αν εργάζεστε με πολλά φύλλα στυλ. Θα χρειαστεί μόνο να εντοπίσετε τη μονάδα CSS για ένα συγκεκριμένο στοιχείο.

Οι μονάδες CSS σάς επιτρέπουν επίσης να συνδυάσετε πολλές κλάσεις μέσω του συνθέτει λέξη-κλειδί. Για παράδειγμα, εξετάστε την ακόλουθη κλάση .btn παραπάνω. Θα μπορούσατε να "επεκτείνετε" αυτήν την τάξη σε άλλες τάξεις χρησιμοποιώντας συνθέσεις.

Για ένα κουμπί υποβολής, θα μπορούσατε να έχετε:

.btn {
/* στυλ */
}
.υποβάλλουν {
 συνθέτει: btn;
 Χρώμα φόντου: πράσινο;
 χρώμα:#FFFFFF
}

Αυτό συνδυάζει τις κλάσεις .btn και .submit. Μπορείτε επίσης να συνθέσετε στυλ από άλλη ενότητα CSS όπως αυτή:

.υποβάλλουν {
 συνθέτει: πρωτογενής από "./colors.css"
 Χρώμα φόντου: πράσινο;
}

Σημειώστε ότι πρέπει να γράψετε τον κανόνα σύνθεσης πριν από άλλους κανόνες.

Πώς να χρησιμοποιήσετε τις μονάδες CSS στο React

Ο τρόπος χρήσης των λειτουργικών μονάδων CSS στο React εξαρτάται από τον τρόπο δημιουργίας της εφαρμογής React.

Εάν χρησιμοποιείτε την εφαρμογή δημιουργίας-αντίδρασης, οι λειτουργικές μονάδες CSS ρυθμίζονται από το κουτί. Ωστόσο, εάν πρόκειται να δημιουργήσετε την εφαρμογή από την αρχή, θα χρειαστεί να διαμορφώσετε τις μονάδες CSS με έναν μεταγλωττιστή όπως το webpack.

Για να ακολουθήσετε αυτό το σεμινάριο, θα πρέπει να έχετε:

  • Ο κόμβος είναι εγκατεστημένος στο μηχάνημά σας.
  • Μια βασική κατανόηση των μονάδων ES6.
  • Ένα βασικό κατανόηση του React.

Δημιουργία εφαρμογής React

Για να κρατήσετε τα πράγματα απλά, μπορείτε να χρησιμοποιήσετε δημιουργία-αντίδραση-εφαρμογή για τη σκαλωσιά μιας εφαρμογής React.

Εκτελέστε αυτήν την εντολή στο δημιουργήστε ένα νέο έργο React που ονομάζονται react-css-modules:

npx δημιουργώ-react-app react-css-modules

Αυτό θα δημιουργήσει ένα νέο αρχείο που ονομάζεται react-css-modules με όλες τις εξαρτήσεις που απαιτούνται για να ξεκινήσετε με το React.

Δημιουργία στοιχείου κουμπιού

Θα δημιουργήσετε ένα στοιχείο Button και μια λειτουργική μονάδα CSS που ονομάζεται Button.module.css σε αυτό το βήμα. Στον φάκελο src, δημιουργήστε έναν νέο φάκελο που ονομάζεται Components. Σε αυτόν τον φάκελο δημιουργήστε έναν άλλο φάκελο που ονομάζεται Button. Θα προσθέσετε το στοιχείο Button και τα στυλ του σε αυτόν τον φάκελο.

Πλοηγηθείτε στο src/Components/Button και δημιουργήστε το Button.js.

εξαγωγήΠροκαθορισμένολειτουργίαΚουμπί() {
ΕΠΙΣΤΡΟΦΗ (
<κουμπί>υποβάλλουν</button>
 )
}

Στη συνέχεια, δημιουργήστε ένα νέο αρχείο που ονομάζεται Button.module.css και προσθέστε τα ακόλουθα.

.btn {
 πλάτος: 90 px;
 ύψος: 40 px;
 padding: 10px 20px;
 περίγραμμα-ακτίνα: 4px;
 σύνορο: κανένα;
}

Για να χρησιμοποιήσετε αυτήν την κλάση στο στοιχείο Button, εισαγάγετε την ως στυλ και αναφέρετέ την στο όνομα της κλάσης του στοιχείου κουμπιού ως εξής:

εισαγωγή στυλ από "./Button.module.css"
εξαγωγήΠροκαθορισμένολειτουργίαΚουμπί() {
ΕΠΙΣΤΡΟΦΗ (
<κουμπί className={styles.btn}>υποβάλλουν</button>
 )
}

Αυτό είναι ένα απλό παράδειγμα που δείχνει πώς να χρησιμοποιήσετε μια μεμονωμένη κλάση. Μπορεί να θέλετε να μοιράζεστε στυλ σε διαφορετικά στοιχεία ή ακόμα και να συνδυάσετε κλάσεις. Για αυτό, μπορείτε να χρησιμοποιήσετε τη λέξη-κλειδί σύνθεσης όπως αναφέρθηκε προηγουμένως σε αυτό το άρθρο.

Χρήση σύνθεσης

Πρώτα, τροποποιήστε το στοιχείο Button με τον ακόλουθο κώδικα.

εισαγωγή στυλ από "./Button.module.css"
εξαγωγήΠροκαθορισμένολειτουργίαΚουμπί({type="primary", label="Button"}) {
ΕΠΙΣΤΡΟΦΗ (
<κουμπί className={styles[type]}>{επιγραφή}</button>
 )
}

Αυτός ο κώδικας κάνει το στοιχείο Button πιο δυναμικό αποδεχόμενος μια τιμή τύπου ως βάση. Αυτός ο τύπος θα καθορίσει το όνομα της κλάσης που εφαρμόζεται στο στοιχείο του κουμπιού. Έτσι, εάν το κουμπί είναι κουμπί υποβολής, το όνομα της τάξης θα είναι "υποβολή". Εάν είναι "σφάλμα", το όνομα της κλάσης θα είναι "σφάλμα" και ούτω καθεξής.

Για να χρησιμοποιήσετε τη λέξη-κλειδί σύνθεσης αντί να γράψετε όλα τα στυλ για κάθε κουμπί από την αρχή, προσθέστε τα ακόλουθα στο Button.module.css.

.btn {
 πλάτος: 90 px;
 ύψος: 40 px;
 padding: 10px 20px;
 περίγραμμα-ακτίνα: 4px;
 σύνορο: κανένα;
}
.πρωταρχικός {
 συνθέτει: btn;
 χρώμα: #FFFFFF;
 χρώμα του φόντου: #6E41E2;
}
.δευτερεύων {
 συνθέτει: btn;
 χρώμα: #6E41E2;
 χρώμα του φόντου: #FFFFFF;
}

Σε αυτό το παράδειγμα, η κύρια και η δευτερεύουσα τάξη χρησιμοποιούν την κλάση btn. Κάνοντας αυτό, μειώνετε την ποσότητα του κώδικα που πρέπει να γράψετε.

Μπορείτε να το προχωρήσετε ακόμη περισσότερο με μια εξωτερική μονάδα CSS που ονομάζεται χρώματα.module.css, που περιέχει τα χρώματα που χρησιμοποιούνται στην εφαρμογή. Στη συνέχεια, μπορείτε να χρησιμοποιήσετε αυτήν την ενότητα σε άλλες ενότητες. Για παράδειγμα, δημιουργήστε το αρχείο colors.module.css στη ρίζα του φακέλου Components με τον ακόλουθο κώδικα:

.πρωτογενήςΒγ {
 χρώμα του φόντου: #6E41E2
}
.δευτερογενήςΒγ {
 χρώμα του φόντου: #FFFFFF
}
.πρωτεύονΧρώμα {
 χρώμα: #FFFFFF
}
.secondaryColor {
 χρώμα: #6E41E2
}

Τώρα στο αρχείο Button/Button.module.css, τροποποιήστε τις κύριες και δευτερεύουσες κλάσεις για να χρησιμοποιήσετε τις παραπάνω κλάσεις ως εξής:

.πρωταρχικός {
 συνθέτει: btn;
 συνθέτει: πρωτεύονΧρώμα από "../colors.module.css";
 συνθέτει: πρωτεύονBg από "../colors.module.css";
}
.δευτερεύων {
 συνθέτει: btn;
 συνθέτει: δευτερεύονΧρώμα από "../colors.module.css";
 συνθέτει: δευτερεύονΒγ από "../colors.module.css";
}

Sass With CSS Modules

Μπορείτε να χρησιμοποιήσετε μονάδες CSS για να βελτιώσετε την αρθρωτή βάση της βάσης κωδίκων σας. Για παράδειγμα, μπορείτε να δημιουργήσετε μια απλή κλάση CSS για ένα στοιχείο κουμπιού και να επαναχρησιμοποιήσετε κλάσεις CSS μέσω σύνθεσης.

Για να ενεργοποιήσετε τη χρήση των μονάδων CSS, χρησιμοποιήστε το Sass. Το Sass—Συντακτικά φοβερά φύλλα στυλ—είναι ένας προεπεξεργαστής CSS που παρέχει έναν τόνο δυνατοτήτων. Περιλαμβάνουν υποστήριξη για ένθεση, μεταβλητές και κληρονομικότητα που δεν είναι διαθέσιμα στο CSS. Με το Sass, μπορείτε να προσθέσετε πιο σύνθετες λειτουργίες στην εφαρμογή σας.