Οι βιβλιοθήκες CSS-in-JS, όπως και τα styled-components, έχουν γίνει πιο δημοφιλείς τα τελευταία χρόνια. Ενσωματώνουν το CSS μέχρι το επίπεδο στοιχείου και σας επιτρέπουν να χρησιμοποιήσετε JavaScript για να ορίσετε επαναχρησιμοποιήσιμα στυλ.

Χρησιμοποιώντας styled-components, μπορείτε να διατηρήσετε την αρχιτεκτονική που βασίζεται σε στοιχεία που ήδη ενισχύει το React. Αλλά η βιβλιοθήκη έχει και κάποια μειονεκτήματα.

Πώς λειτουργούν τα στοιχεία με στυλ

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

Για να δείτε πώς λειτουργεί, εξετάστε το ακόλουθο στοιχείο τίτλου που αποδίδει ένα στοιχείο h1.

συνθ Τίτλος = στιλ.h1`
μέγεθος γραμματοσειράς: 1.5 εκ;
 text-align: κέντρο;
 χρώμα: κόκκινο;
`;

Μπορείτε να χρησιμοποιήσετε αυτό το στοιχείο όπως οποιοδήποτε άλλο στοιχείο React.

instagram viewer 
συνθ Αρχική σελίδα = () => {
ΕΠΙΣΤΡΟΦΗ (
<Τίτλος>Επικεφαλίδα με στυλ συστατικού</Title>
	)
}

Είναι επίσης πολύ ισχυρό γιατί διευκολύνει την εργασία με στηρίγματα και κατάσταση.

Για παράδειγμα, το χρώμα και το φόντο αυτού του στοιχείου εξαρτώνται από τα στηρίγματα.

εισαγωγή στιλ από "στυλ-εξαρτήματα"?
συνθ Κουμπί = στυλ.κουμπί`
υλικό παραγεμίσματος: 0.8 εκμ 1.6 εκμ;
 χρώμα φόντου: ${(props) => (προπς.πρωτοβάθμιο; "μωβ": "άσπρο")};
 σύνορο: 1px στερεό #00000;
 χρώμα: ${(props) => (προπς.πρωτοβάθμιο; "άσπρο": "μωβ")};
`;
εξαγωγήΠροκαθορισμένολειτουργίαΣπίτι() {
 ΕΠΙΣΤΡΟΦΗ <Κύριο κουμπί>Πρωταρχικός</Button>
}

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

Πλεονεκτήματα της χρήσης εξαρτημάτων με στυλ

Ακολουθούν ορισμένα πλεονεκτήματα της χρήσης της βιβλιοθήκης styled-components.

Επιλύει προβλήματα ειδικότητας CSS

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

Σας επιτρέπει να γράψετε CSS μέσα σε στοιχεία

Όπως φαίνεται από το παράδειγμα στοιχείου κουμπιού, το styled-components σάς επιτρέπει να συνδυάσετε CSS και JS στο ίδιο αρχείο. Επομένως, δεν χρειάζεται να δημιουργήσετε ένα ξεχωριστό αρχείο CSS ή να συνεχίσετε να αλλάζετε από αρχείο σε αρχείο.

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

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

Επιτρέπει τον έλεγχο τύπου

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

διεπαφήστηρίγματα{
 πρωταρχικός: boolean
}
const Κουμπί = στυλ.κουμπί<στηρίγματα>`
υλικό παραγεμίσματος: 0.8 εκμ 1.6 εκμ;
 χρώμα φόντου: ${(props) => (προπς.πρωτοβάθμιο; "μωβ": "άσπρο")};
 σύνορο: 1px στερεό #00000;
 χρώμα: ${(props) => (προπς.πρωτοβάθμιο; "άσπρο": "μωβ")};
`;

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

Υποστηρίζει Theming Out of the Box

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

συνθ Κουμπί = στιλ.κυρίως`
 χρώμα φόντου: ${props => props.theme.light.background};
 χρώμα: ${props => props.theme.light.fontColor};
`
<ThemeProvider theme={theme}>
<Κουμπί>
 Κουμπί φωτός
</Button>
</ThemeProvider>

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

Μειονεκτήματα της χρήσης εξαρτημάτων με στυλ

Ενώ η χρήση της βιβλιοθήκης styled-components έχει πολλά πλεονεκτήματα, έχει επίσης και μειονεκτήματα.

Δεν είναι ανεξάρτητο από το πλαίσιο

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

Αυτό είναι χρονοβόρο και δαπανηρό. Χρησιμοποιώντας Ενότητες CSS ή μια ανεξάρτητη βιβλιοθήκη πλαισίου, όπως το συναίσθημα, είναι πιο μελλοντική.

Μπορεί να είναι δύσκολο να διαβαστεί

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

<Κύριος>
<Nav>
<Στοιχείο λίστας>
<LinkText>Υιοθετήστε ένα κατοικίδιο</LinkText>
</ListItem>
<Στοιχείο λίστας>
<LinkText>Προσφέρω</LinkText>
</ListItem>
</Nav>
<Επί κεφαλής>Υιοθετήστε, μην'να ψωνίσετε!</Header>
<SecondaryBtn btnText="Προσφέρω" />
</Main>

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

Για παράδειγμα, το στοιχείο Κεφαλίδα μπορεί να είναι μια επικεφαλίδα, αλλά αν δεν ελέγξετε τα στυλ, μπορεί να μην μάθετε ποτέ εάν είναι h1, h2 ή h3.

Ορισμένοι προγραμματιστές επιλύουν αυτό το πρόβλημα χρησιμοποιώντας μόνο το στοιχείο με στυλ ως περιτύλιγμα και χρησιμοποιώντας τις σημασιολογικές ετικέτες HTML για τα στοιχεία μέσα σε αυτό.

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

<h1>Υιοθετήστε, μην'να ψωνίσετε!</h1>

Μπορείτε να το προχωρήσετε περαιτέρω ορίζοντας τα στοιχεία με στυλ σε ένα άλλο αρχείο (π.χ. styled.js), τα οποία μπορείτε αργότερα να εισαγάγετε σε ένα στοιχείο React.

εισαγωγή * όπως και Στυλ από "./στυλ"
// χρήση styled.components
<στιλ. Κύριος>
// κωδικός
</styled.Main>

Κάνοντας αυτό, έχετε μια σαφή εικόνα για το ποια στοιχεία έχουν στυλ και ποια στοιχεία React.

Τα στοιχεία με στυλ συντάσσονται στο χρόνο εκτέλεσης

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

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

Πότε να χρησιμοποιείτε στοιχεία με στυλ

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

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