Διαμορφώστε το στυλ της εφαρμογής React.js χρησιμοποιώντας το Emotion

Το στυλ μιας εφαρμογής React μπορεί να είναι προκλητικό, ειδικά αν θέλετε να διατηρήσετε τα στυλ σας οργανωμένα και διατηρήσιμα. Για να απλοποιηθεί αυτή η διαδικασία, η βιβλιοθήκη Emotion παρέχει μια αφαίρεση υψηλότερου επιπέδου πάνω από το CSS.

Τι είναι το Συναίσθημα;

Το Emotion είναι μια βιβλιοθήκη για το στυλ εφαρμογών React που παρέχει έναν απλό και αποτελεσματικό τρόπο διαχείρισης των στυλ σας. Σας επιτρέπει να γράφετε CSS σε JavaScript και παρέχει ένα ευέλικτο API για το στυλ των στοιχείων σας.

Ένα από τα κύρια πλεονεκτήματα της χρήσης του Emotion για το στυλ της εφαρμογής React είναι ότι παρέχει έναν πιο αποτελεσματικό τρόπο διαχείρισης των στυλ σας. Για παράδειγμα, μπορείτε να χρησιμοποιήσετε πανομοιότυπα ονόματα κλάσεων σε πολλά στοιχεία χωρίς τον κίνδυνο να ονομάσετε συγκρούσεις που προκύπτουν όταν εργάζεστε με CSS/SASS.

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

Πώς να εγκαταστήσετε το Emotion

Για να προσθέσετε τη βιβλιοθήκη Emotion στην εφαρμογή React, εκτελέστε την ακόλουθη εντολή τερματικού:

npm install --save @emotion/react

Η βιβλιοθήκη Emotion θα πρέπει τώρα να εγκατασταθεί στο έργο σας και να είναι έτοιμη για χρήση για το στυλ της εφαρμογής React.

Styling με χρήση του Emotion's css Prop

Αφού εγκαταστήσετε τη βιβλιοθήκη Emotion, θα μπορείτε να χρησιμοποιήσετε το css στήριγμα για το στυλ της εφαρμογής React. ο css Το prop είναι παρόμοιο με το στιλ, καθώς μπορείτε να του μεταδώσετε στυλ με τη μορφή συμβολοσειρών ή κανονικών αντικειμένων JavaScript.

Για να διαμορφώσετε την εφαρμογή σας χρησιμοποιώντας το css prop, πρέπει να το εισαγάγετε από το @emotion/react βιβλιοθήκη και, στη συνέχεια, ορίστε τα στυλ σας:

/** @jsxImportSource @συναισθημα/react */
εισαγωγή Αντιδρώ από'αντιδρώ';
εισαγωγή {css} από'@emotion/react';
λειτουργίαApp() {
ΕΠΙΣΤΡΟΦΗ (
 υλικό παραγεμίσματος: 0.5rem 1rem;
 σύνορο: κανένα;
 γραμματοσειρά-οικογένεια: cursive;
 ακτίνα συνόρων: 12px;
 χρώμα: #333333;
 χρώμα φόντου: κληρονομούν;
 margin-block-start: 2rem;
 margin-block-end: 2rem;
`}>
 Κάντε κλικ στο Me
 </button>
 )
}
εξαγωγήΠροκαθορισμένο Εφαρμογή?

Η πρώτη γραμμή κώδικα, /** @jsxImportSource @emotion/react */, είναι ένα συγκεκριμένο σχόλιο που πρέπει να προσθέσετε στο αρχείο JSX για να υποδείξετε ότι η βιβλιοθήκη Emotion θα πρέπει να χρησιμοποιηθεί ως το JSX pragma για αυτό το αρχείο.

Στο JSX, ένα pragma είναι μια συνάρτηση που μετατρέπει τη σύνταξη JSX σε κανονική JavaScript. Από προεπιλογή, το React χρησιμοποιεί το React.createElement λειτουργούν ως το JSX pragma. Ωστόσο, με το @jsxImportSource σχολιάστε, μπορείτε να καθορίσετε μια διαφορετική πραγματικότητα.

Σε αυτή την περίπτωση, το @emotion/react Η pragma λέει στο JSX να χρησιμοποιήσει το jsx λειτουργία από τη βιβλιοθήκη Emotion για να μετασχηματίσει τον κώδικα JSX. Προσθέτοντας το σχόλιο pragma σε ένα αρχείο JSX, μπορείτε να χρησιμοποιήσετε τις δυνατότητες CSS-in-JS της βιβλιοθήκης Emotion στα στοιχεία σας.

Το στοιχείο κουμπιού αποδίδει ένα κουμπί με κάποιο προσαρμοσμένο στυλ. Εδώ, το css Το prop προσθέτει το προσαρμοσμένο στυλ στο στοιχείο του κουμπιού.

ο css Το prop υποστηρίζει επίσης ένθετο στυλ. Το ένθετο στυλ σάς επιτρέπει να γράψετε στυλ που είναι ένθετα το ένα μέσα στο άλλο.

Για παράδειγμα:

/** @jsxImportSource @συναισθημα/react */
εισαγωγή Αντιδρώ από'αντιδρώ';
εισαγωγή {css} από'@emotion/react';
λειτουργίαApp() {
ΕΠΙΣΤΡΟΦΗ (
 υλικό παραγεμίσματος: 0.5rem 1rem;
 σύνορο: κανένα;
 γραμματοσειρά-οικογένεια: cursive;
 ακτίνα συνόρων: 12px;
 χρώμα: #333333;
 χρώμα φόντου: κληρονομούν;
 margin-block-start: 2rem;
 margin-block-end: 2rem;
 &:φτερουγίζω{
 χρώμα: #e2e2e2;
 χρώμα του φόντου: #333333;
 }
`}>
 Κάντε κλικ στο Me
 </button>
 )
}
εξαγωγήΠροκαθορισμένο Εφαρμογή?

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

Μεταβίβαση στυλ αντικειμένων στο css Prop

ο css Το prop δέχεται επίσης κανονικά στυλ αντικειμένων JavaScript. Κατά τη διαμόρφωση πολλών στοιχείων, η χρήση στυλ αντικειμένων σάς επιτρέπει να επαναχρησιμοποιείτε στυλ στα στοιχεία σας.

Για να περάσετε στυλ αντικειμένων στο css prop, ορίστε τα στυλ ως αντικείμενο JavaScript και περάστε το στο prop:

συνθ στυλ = {
 υλικό παραγεμίσματος: '0,5 rem 1rem',
 σύνορο: 'κανένας',
 fontFamily: 'ρέων',
 Ακτίνα συνόρων: '12 px',
 χρώμα: '#333333',
 χρώμα του φόντου: 'κληρονομώ',
 marginBlockStart: '2 rem',
 marginBlockEnd: '2 rem',
'&:φτερουγίζω': {
 χρώμα: '#e2e2e2',
 χρώμα του φόντου: '#333333',
 }
}
ΕΠΙΣΤΡΟΦΗ (
"εφαρμογή">
Κάντε κλικ στο Me</button>
 </div>
);

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

Styling με χρήση των Styled Components

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

ο στιλ Η λειτουργία σάς επιτρέπει να δημιουργείτε επαναχρησιμοποιήσιμα στοιχεία με στυλ. Για να χρησιμοποιήσετε το στιλ λειτουργία, εισάγετέ το από το συναίσθημα/στυλ βιβλιοθήκη.

Για να πάρετε το @emotion/στυλ βιβλιοθήκη στην εφαρμογή σας, θα την εγκαταστήσετε στο έργο σας. Μπορείτε να το κάνετε αυτό εκτελώντας την ακόλουθη εντολή στο τερματικό του έργου σας:

npm εγκατάσταση @emotion/styled

Μετά την εγκατάσταση του @emotion/στυλ βιβλιοθήκη, εισάγετε το στιλ λειτουργήστε και ορίστε τα στυλ σας:

εισαγωγή στιλ από"@emotion/styled";
συνθ Κουμπί = styled.button({
 υλικό παραγεμίσματος: '0,5 rem 1rem',
 σύνορο: 'κανένας',
 fontFamily: 'ρέων',
 Ακτίνα συνόρων: '12 px',
 χρώμα: '#333333',
 χρώμα του φόντου: 'κληρονομώ',
 marginBlockStart: '2 rem',
 marginBlockEnd: '2 rem',
'&:φτερουγίζω': {
 χρώμα: '#e2e2e2',
 χρώμα του φόντου: '#333333',
 }
})
εξαγωγήΠροκαθορισμένο Κουμπί;

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

Όπως έτσι:

εισαγωγή Αντιδρώ από'αντιδρώ';
εισαγωγή Κουμπί από'./Κουμπί';
λειτουργίαApp() {
ΕΠΙΣΤΡΟΦΗ (



Κάντε κλικ στο Me</Button>
 </div>
 );
}

εξαγωγήΠροκαθορισμένο Εφαρμογή?

Απόδοση του App Το στοιχείο θα εμφανίσει ένα κουμπί με τα στυλ που ορίζονται στο Κουμπί στοιχείο στην οθόνη σας.

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

εισαγωγή στιλ από"@emotion/styled";
συνθ Κουμπί = στυλ.κουμπί`
 υλικό παραγεμίσματος: 0.5rem 1rem;
 σύνορο: κανένα;
 γραμματοσειρά-οικογένεια: cursive;
 ακτίνα συνόρων: 12px;
 χρώμα: #333333;
 χρώμα φόντου: κληρονομούν;
 margin-block-start: 2rem;
 margin-block-end: 2rem;
 &:hover {
 χρώμα: #e2e2e2;
 χρώμα του φόντου: #333333;
 }
`
εξαγωγήΠροκαθορισμένο Κουμπί;

Αποτελεσματικό στυλ με συναίσθημα

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

Επομένως, αν ψάχνετε για έναν πιο αποτελεσματικό και ευέλικτο τρόπο για να διαμορφώσετε τα στοιχεία του React, σκεφτείτε το Emotion.