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

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

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





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



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

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





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

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



.btn { 
    width: 90px; 
    height: 40px; 
    padding: 10px 20px; 
}

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

πώς να μεταδώσετε από mac σε roku 
import styles from "./styles.module.js"

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



class="styles.btn"

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

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



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

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

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

.btn { 
    /* styles */ 
} 
  
.submit { 
    composes: btn; 
    background-color: green; 
    color:#FFFFFF 
}

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

.submit { 
    composes:primary from "./colors.css" 
    background-color: green; 
}

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

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

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

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

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

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

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

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

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

npx create-react-app react-css-modules

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

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

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

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

export default function Button() { 
    return ( 
        <button>Submit</button> 
    ) 
}

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

.btn { 
    width: 90px; 
    height: 40px; 
    padding: 10px 20px; 
    border-radius: 4px; 
    border: none; 
}

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

import styles from "./Button.module.css" 
  
export default function Button() { 
    return ( 
        <button className={styles.btn}>Submit</button> 
    ) 
}

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

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

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

import styles from "./Button.module.css" 
  
export default function Button({type="primary", label="Button"}) { 
    return ( 
        <button className={styles[type]}>{label}</button> 
    ) 
}

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

οι καλύτερες εφαρμογές Android που δεν υπάρχουν στο play store 2016

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

.btn { 
    width: 90px; 
    height: 40px; 
    padding: 10px 20px; 
    border-radius: 4px; 
    border: none; 
} 
  
.primary { 
    composes: btn; 
    color: #FFFFFF; 
    background-color: #6E41E2; 
} 
  
.secondary { 
    composes: btn; 
    color: #6E41E2; 
    background-color: #FFFFFF; 
}

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

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

.primaryBg { 
    background-color: #6E41E2 
} 
.secondaryBg { 
    background-color: #FFFFFF 
} 
  
.primaryColor { 
    color: #FFFFFF 
} 
.secondaryColor { 
    color: #6E41E2 
}

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

.primary { 
    composes: btn; 
    composes: primaryColor from "../colors.module.css"; 
    composes: primaryBg from "../colors.module.css"; 
} 
  
.secondary { 
    composes: btn; 
    composes: secondaryColor from "../colors.module.css"; 
    composes: secondaryBg from "../colors.module.css"; 
}

Sass With CSS Modules

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

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