Πώς να χτίσετε ένα συστατικό με σβησμένο στυλ

https://unsplash.com/photos/4gKHjKG7ty4

Το Styled-components είναι μια βιβλιοθήκη CSS-In-JavaScript. Σας επιτρέπει να γράφετε κώδικα CSS μέσα στα αρχεία σας React JSX. Η ζωή είναι καλή όταν οι ιδιότητες CSS του εξαρτήματός σας μπορούν να αλλάξουν δυναμικά με τα στυλ στοιχεία.

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

Ξεκινώντας

Αρχικά, ας δημιουργήσουμε ένα στοιχείο με συμβατικό αρχείο CSS.

Προς το παρόν, το στοιχείο μοιάζει με την παρακάτω εικόνα.

Πολύ χαριτωμένο!

Κάντε τον τίτλο "Χαριτωμένο κουτάβι" ένα άλλο χρώμα

Ας δώσουμε στο Content.jsx ένα υπόβαθρο. Για να το καταστήσετε απλό, δώστε του ένα πηδάλιο που ονομάζεται skyblue.

Τώρα, μπορούμε να αλλάξουμε τις ιδιότητες Content.jsx CSS με βάση το skyblue. Θέλω να σας συστήσω σε δύο μεθόδους για να προσθέσετε νέες ιδιότητες CSS μέσω γενικού CSS.

Εσωτερικό στυλ

Όπως μπορείτε να δείτε, παίρνουμε skyblue ως προϋπόθεση για να προσθέσετε CSS ιδιότητες στο αντικείμενο στυλ. Στη συνέχεια, εγχέουμε το αντικείμενο στυλ σαν ένα στυλ γραμμής. Τώρα το αποτέλεσμα θα μοιάζει με αυτό ...

Το χρώμα του τίτλου είναι τώρα γαλάζιο! Τώρα ας προχωρήσουμε στη δεύτερη μέθοδο.

Προσθήκη νέων τάξεων CSS

Όπως γνωρίζετε, δημιουργήσαμε μια κλάση CSS που ονομάζεται περιεχόμενο - skyblue. Αυτό είναι απλό για να γίνει το μπλε χρώμα του ουρανού. Θέλουμε να προσθέσουμε αυτή την τάξη στον τίτλο "Cute Puppy". Αυτό που κάνουμε είναι να δημιουργήσουμε έναν πίνακα για την αποθήκευση των τάξεων CSS, στη συνέχεια, χρησιμοποιώντας τη μέθοδο join για να χωρίσουμε τάξεις με χώρο. Έτσι, τώρα, το className θα είναι σαν το

Cute Puppy . Το αποτέλεσμα θα έχει την ίδια εμφάνιση με τη μέθοδο inline-style.

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

Ποιά είναι τα πλεονεκτήματα και τα μειονεκτήματα τόσο του inline style όσο και της προσθήκης νέων κατηγοριών CSS;

Πλεονεκτήματα

  1. Είναι γενικό CSS και βανίλια JS - δεν χρειάζεται να μάθετε νέα σύνταξη και API.
  2. Εύκολο στον εντοπισμό σφαλμάτων χρησιμοποιώντας τα devtools των φυλλομετρητών.

Μειονεκτήματα

  1. Δεν είναι ευέλικτο να τροποποιήσει το inline style λόγω της εξειδίκευσης CSS. Δεν μπορείτε απλώς να προσθέσετε μια κλάση για να αντικαταστήσετε το inline style επειδή το inline style έχει υψηλότερη ειδικότητα.
  2. Δεν είναι ξεκάθαρο να βλέπετε ποιες κλάσεις περιλαμβάνονται στην className μέσω της προσθήκης νέας μεθόδου κλάσεων CSS. Όταν βλέπετε αυτόν τον κώδικα
    Cute Puppy , πρέπει να κοιτάξετε πίσω στη λογική που προσθέσατε στις τάξεις. Αυτό θα είναι ένα μεγάλο μειονέκτημα όταν έχετε πολλά className να τροποποιήσετε.

Αυτός είναι ο λόγος για τον οποίο θέλω να σας συστήσω στα στυλ στοιχεία.

Στυλιζαρισμένα στοιχεία

Χρησιμοποιήστε τα καλύτερα κομμάτια του ES6 και του CSS για να στυλιστούν οι εφαρμογές σας χωρίς στρες
στυλ-εξαρτήματα

Το Styled-components είναι μια βιβλιοθήκη που διευκολύνει την τροποποίηση των ιδιοτήτων του CSS. Μπορείτε να το εγκαταστήσετε μόνο μέσω npm install styled-components -save ή νήματα προσθέστε styled-components. Στη συνέχεια, μπορείτε να χρησιμοποιήσετε στυλ στοιχεία για να σχεδιάσετε τα στοιχεία σας. Ας πάρουμε το Cute Puppy ως παράδειγμα.

Καταρχάς, πρέπει να εισαγάγουμε στοιχεία στυλ στη συνιστώσα μας. Εισάγουμε το όνομα ως όνομα που ονομάζεται στυλ. Στη συνέχεια, μπορούμε να καθορίσουμε ποιο στοιχείο HTML θα πρέπει να χρησιμοποιείται για κάθε στοιχείο στυλ. Για παράδειγμα,

const Κουμπί = styled.button` / * Ιδιότητες CSS * / `

σημαίνει ότι αυτό το στοιχείο κουμπιών αντιπροσωπεύει το στοιχείο με στυλ και δίνει ένα <κουμπί />. Στη συνέχεια, μπορούμε απλά να μετακινήσουμε τις ιδιότητες CSS σε κάθε στοιχείο με στυλ. Αυτό είναι! Απλά τόσο απλό! Τώρα μπορείτε να δείτε την αρχική έκδοση του Cute Puppy.

Τι γίνεται με την αλλαγή του χρώματος του τίτλου χρησιμοποιώντας στυλ στοιχεία; Τα στοιχειοθετημένα στοιχεία αξιοποιούν τα πρότυπα JavaScript ES6. Μπορείτε να μεταβιβάσετε μια συνάρτηση σε πρότυπα κυριολεκτικά. Αυτό θα είναι χρήσιμο όταν θέλετε να τροποποιήσετε τις ιδιότητες CSS με βάση τις σκηνές. Ας δούμε βαθύτερα στο θέμα μέσω Cute Puppy.

Περνάμε το πρότυπο skyblue στο συστατικό τίτλου που χτίστηκε με στυλ-εξαρτήματα. Στη συνέχεια, μπορούμε απλά να μεταβιβάσουμε μια συνάρτηση στις ιδιότητες CSS που θέλουμε να τροποποιήσουμε μέσω των κυριοτέρων προτύπων. Όπως μπορείτε να δείτε, περάσαμε ένα βέλος συναρτήσεων βέλους => (props.skyblue? 'Skyblue': 'black') για να καθορίσουμε υπό ποιες συνθήκες το χρώμα του τίτλου να είναι μπλε και να τελειώσουμε να αλλάζουμε το χρώμα του τίτλου!

Πώς να κάνετε εντοπισμό σφαλμάτων

Ας ανοίξουμε το Chrome Devtools για να δούμε τι συμβαίνει όταν κατασκευάζουμε ένα εξάρτημα με στοιχεία στυλ.

Τι συνέβη στο Chrome Devtools

Τα κομμένα στοιχεία έχουν ένα ενσωματωμένο σύστημα μονάδων CSS. Αυτό είναι μεγάλο για την επίλυση του προβλήματος των συγκρούσεων κλασικών. Ωστόσο, σίγουρα δεν γνωρίζουμε ποιες κλάσεις χρησιμοποιούμε όταν προσπαθούμε να εντοπίσουμε σφάλματα στο Chrome Devtools. Εκτός αυτού, όταν ελέγξουμε τη λειτουργία rendering στο Content.jsx:

Ξέρετε τι HTML στοιχείο χρησιμοποιούμε; απολύτως όχι, έτσι; Πρέπει να κοιτάξετε πίσω σε κάθε στοιχείο στυλ για να ελέγξετε τι στοιχείο HTML χρησιμοποιεί. Αυτό είναι ενοχλητικό στην πραγματικότητα. Επίσης, όταν χτίζετε στυλ στοιχεία με αυτό τον τρόπο, ουσιαστικά εγκαταλείπετε τα ισχυρά χαρακτηριστικά των επιλογέων CSS.

Λαμβάνοντας υπόψη τα παραπάνω προβλήματα, θέλω να εισαγάγω μια απλή μέθοδο για να δημιουργήσω ένα debuggable στυλ στοιχείο, το οποίο συνδυάζει το γενικό CSS με τα στυλ στοιχεία.

Συνδυάστε τους επιλογείς CSS με τα Styled-components

Στην αρχή αυτού του μέρους, θέλω να μάθετε πώς να στυλίσουμε τα υπάρχοντα εξαρτήματα με στυλιστικά στοιχεία.

Η στυλ μέθοδος λειτουργεί τέλεια σε όλα τα δικά σας ή οποιαδήποτε τρίτα κατασκευαστικά στοιχεία επίσης. Εφόσον περνούν από το πρότυπο className στις παρασχεθείσες υποσυνιστώσες τους, οι οποίες θα πρέπει να τις μεταβιβάσουν και ούτω καθεξής. Τελικά, το className πρέπει να μεταβιβαστεί στη γραμμή σε έναν πραγματικό κόμβο DOM για να έχει αποτέλεσμα το στυλ.

Πρέπει να προσθέσουμε className σε γενικά συστατικά και μπορούμε να τα στυλίσουμε εύκολα με τα στυλ στοιχεία. Ας δούμε πώς να το εκμεταλλευτούμε για να δημιουργήσουμε ένα debuggable styled-component.

Πρέπει να περιτυλίξουμε το Content.jsx μέσω του προτύπου className και μπορούμε να το στυλίσουμε με αυτό το μοτίβο:

const StyledContent = στυλ (Περιεχόμενο) `/ * Ιδιότητες CSS * /`

Στη συνέχεια, μπορούμε να τυλίξουμε οποιοδήποτε στοιχείο στο στυλ στοιχείο. Επιπλέον, μπορούμε επίσης να χρησιμοποιήσουμε τη δύναμη των επιλογών CSS μέσα στο στυλ στοιχείο. Ακόμη περισσότερο, η σύνταξη SCSS είναι διαθέσιμη σε στυλ-εξαρτήματα! Ας δούμε πώς συμβαίνει αυτό όταν ανοίγουμε την κονσόλα στο Chrome Devtools.

Τώρα οι κλάσεις έχουν νόημα, έτσι; Και εξακολουθούμε να επωφελούμε από το ενσωματωμένο σύστημα δομοστοιχείων CSS εξαιτίας του προτύπου className. Για να το θέσετε απλά, απλά πρέπει να φροντίσετε τα κλασσικά ονόματα CSS μέσα στο στοιχείο, τότε θα είναι ωραία . Θυμηθείτε πώς τροποποιούμε τις ιδιότητες του CSS με τη μετάβαση μιας συνάρτησης σε στυλ-εξαρτήματα; Εξακολουθεί να λειτουργεί με αυτή τη μέθοδο! Φυσικά, το αποτέλεσμα θα εξακολουθεί να μοιάζει ...

Η ζωή δεν ήταν ποτέ τόσο όμορφη!

Τύλιξε

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

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

ΔΙΑΔΗΛΩΣΗ

Κωδικός πηγής

Μπορείτε να ελέγξετε τον πηγαίο κώδικα κάθε μεθόδου στο Github repo μου

1. Στυλ Inline

2. Προσθέστε μια νέα κλάση

3. Στυλιζαρισμένα στοιχεία

4. Συνδυάστε τους επιλογείς CSS με στοιχεία στυλ

Σας ευχαριστώ που διαβάσατε το άρθρο μου. Ελπίζω ότι δεν χάσατε το χρόνο σας. Αν σας αρέσει αυτό το άρθρο, παρακαλώ αισθανθείτε ελεύθερος να μου δώσετε ένα χειροκρότημα . Τα χτυπήματα σας θα με παρακινήσουν να γράψω περισσότερα άρθρα υψηλής ποιότητας ️.

Ακολούθησέ με στο τουίτερ

Ακολουθήστε με στο Github

Συνδεθείτε στο LinkedIn