Διαμόρφωση στοιχείων React με Emotion

Θέλετε να χειρίζεστε το styling των στοιχείων του React με έναν σύγχρονο και ισχυρό τρόπο; Με τη βιβλιοθήκη Emotion, μπορείτε να ενσωματώσετε CSS απευθείας στα στοιχεία React και να σχεδιάσετε αποτελεσματικά τη διεπαφή χρήστη. Σε αυτόν τον οδηγό, θα σας εξηγήσω τα βασικά στοιχεία του styling με το Emotion, πώς να εγκαταστήσετε και να χρησιμοποιήσετε τη βιβλιοθήκη και θα σας δώσω μερικές χρήσιμες συμβουλές.

Βασικά συμπεράσματα

• Το Emotion καθιστά δυνατή τη συγγραφή CSS σε JavaScript και προσφέρει διαισθητικό χειρισμό.
• Με το Emotion μπορείτε να χρησιμοποιήσετε διάφορες τεχνικές styling, συμπεριλαμβανομένων των template literals και της χρήσης του css prop.
• Η διαχείριση στυλ γίνεται πιο σπονδυλωτή με τη χρήση του Emotion, γεγονός που βελτιώνει την επαναχρησιμοποίηση και την αναγνωσιμότητα.

Οδηγός βήμα προς βήμα

1. Εγκαταστήστε το Emotion

Πρώτα πρέπει να εγκαταστήσετε το Emotion στο έργο σας. Ανοίξτε το τερματικό και πλοηγηθείτε στον κατάλογο του έργου σας. Εκτελέστε την ακόλουθη εντολή για να εγκαταστήσετε τη βιβλιοθήκη emotion:

npm install @emotion/react @emotion/styled

2. import CSS

Μπορείτε να χρησιμοποιήσετε το emotion στο αρχείο σας App.jsx. Θα πρέπει να κάνετε import emotion για να χρησιμοποιήσετε τη συνάρτηση css και να εισάγετε το στοιχείο styled. Προσθέστε τα ακόλουθα στην κορυφή του αρχείου σας:

/** @jsxImportSource @emotion/react */ import { css } from '@emotion/react'; import styled from '@emotion/styled',

3. διαμόρφωση με πρότυπα λογοτεχνικά στοιχεία

Χρησιμοποιήστε τη συνάρτηση css του Emotion για να δημιουργήσετε μια μεταβλητή CSS. Καθορίστε τις συμβάσεις CSS χρησιμοποιώντας γραμματικά πρότυπα. Ακολουθεί ένα παράδειγμα για το πώς μπορείτε να γράψετε μια κλάση περιτύλιξης για την εφαρμογή σας:

const appStyle = css` display: flex- flex-direction: column- font-size: 16px- `,

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

4. Εφαρμογή του στυλ

Για να εφαρμόσετε το καθορισμένο στυλ, περάστε τη μεταβλητή appStyle στην πτώση className του κύριου στοιχείου HTML σας. Να πώς θα πρέπει να μοιάζει αυτό:

function App() { return <div css={appStyle}>Hello world!</div>; }

5. Χρήση στιλιζαρισμένων στοιχείων

Εκτός από τη χρήση της μεταβλητής css, μπορείτε επίσης να χρησιμοποιήσετε στυλιζαρισμένα στοιχεία με το emotion. Για να δημιουργήσετε ένα στυλιζαρισμένο στοιχείο, μπορείτε να χρησιμοποιήσετε τον ακόλουθο κώδικα:

const Container = styled.div` padding: 20px; background-color: lightblue; `,

Αυτό θα κάνει το Container ένα νέο συστατικό βασισμένο σε CSS που θα έχει όλα τα καθορισμένα στυλ.

6. Εισαγωγή ερωτημάτων πολυμέσων

Το Emotion διευκολύνει την ενσωμάτωση ερωτημάτων πολυμέσων στο CSS σας. Απλά προσθέστε τα στο πρότυπο κυριολεκτικά:

const responsiveStyle = css` @media (max-width: 600px) { font-size: 14px; } `,

Αυτό το ερώτημα πολυμέσων αλλάζει το μέγεθος της γραμματοσειράς του κειμένου εάν το πλάτος εμφάνισης είναι μικρότερο από 600 pixel.

7. Χρήση εφέ αιώρησης

Μπορείτε επίσης εύκολα να ορίσετε εφέ hover στα πρότυπα CSS σας:

const buttonStyle = css` background-color: blue; color: white; &:hover { background-color: darkblue; } `,

Αυτός ο κανόνας CSS αλλάζει το χρώμα φόντου του στοιχείου όταν το στοιχείο περνάει με το ποντίκι.

8. Συνδυάστε πιο σύνθετα στυλ

Το Emotion σας επιτρέπει να συνδυάζετε διάφορα ονόματα κλάσεων. Αυτό καθίσταται εφικτό με τη συνάρτηση cx:

import { css, cx } from '@emotion/react',

const primaryStyle = css color: blue;,

const secondaryStyle = css color: red;,

Σε αυτή την περίπτωση, το κείμενο εμφανίζεται τόσο σε μπλε όσο και σε κόκκινο χρώμα.

9. Μελλοντικές επεκτάσεις

Αν διαχειρίζεστε ένα μεγάλο έργο στο μέλλον, μπορεί να είναι χρήσιμο να οργανώσετε τα στυλ σας σε διαφορετικές ενότητες. Για παράδειγμα, μπορείτε να δημιουργήσετε το commonStyles.js και να εξάγετε εκεί τα βασικά σας στυλ:

// commonStyles.js export const flexCenter = css` display: flex; justify-content: centre; align-items: centre; `,

Τώρα μπορείτε να εισαγάγετε το flexCenter σε οποιοδήποτε άλλο στοιχείο.

10. Δοκιμές και προσαρμογές

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

Περίληψη

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