Αναγνώστες σαν εσάς βοηθούν στην υποστήριξη του MUO. Όταν κάνετε μια αγορά χρησιμοποιώντας συνδέσμους στον ιστότοπό μας, ενδέχεται να κερδίσουμε μια προμήθεια θυγατρικών. Διαβάστε περισσότερα.

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

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

Εγκατάσταση της Βιβλιοθήκης styled-components

Μπορείτε να εγκαταστήσετε styled-components εκτελώντας αυτήν την εντολή στο τερματικό σας:

npm i styled-components

Για να εγκαταστήσετε εξαρτήματα με στυλ χρησιμοποιώντας νήμα, εκτελέστε:

νήματα προσθέστε στυλ-εξαρτήματα

Δημιουργία ενός στοιχείου με στυλ

Ένα στοιχείο με στυλ είναι ακριβώς όπως ένα τυπικό στοιχείο React, με στυλ. Υπάρχουν διάφορα

instagram viewer
πλεονεκτήματα και μειονεκτήματα των στυλιζαρισμένων εξαρτημάτων, τα οποία είναι σημαντικό να ληφθούν υπόψη για σωστή χρήση.

Η γενική σύνταξη μοιάζει με αυτό:

εισαγωγή στιλ από"στυλ-εξαρτήματα";

συνθ ComponentName = στυλ. DOMElementTag`
 cssΙδιότητα: cssValue
`

Εδώ εισάγετε στιλ από το στυλ-συστατικό βιβλιοθήκη. ο στιλ Η λειτουργία είναι μια εσωτερική μέθοδος που μετατρέπει τον κώδικα JavaScript σε πραγματικό CSS. ο Όνομα στοιχείου είναι το όνομα του στιλ συστατικού. ο DOMElementTag είναι το στοιχείο HTML/JSX που σκοπεύετε να δώσετε στυλ, όπως div, span, button κ.λπ.

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

Όπως έτσι:

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

Τώρα μπορείτε να δημιουργήσετε ένα στυλ για το κουμπί χρησιμοποιώντας styled-components:

εισαγωγή στιλ από"στυλ-εξαρτήματα";
συνθ StyledButton = στυλ.κουμπί`
 υλικό παραγεμίσματος: 1rem 0.8rem;
 ακτίνα συνόρων: 15px;
 Χρώμα φόντου: γκρι;
 χρώμα: #FFFFFF;
 μέγεθος γραμματοσειράς: 15px;
`

Συνδυάζοντας τα πάντα, θα χρειαστεί να αντικαταστήσετε το κουμπί ετικέτα με το StyledButton συστατικό:

εισαγωγή στιλ από"στυλ-εξαρτήματα";
εισαγωγή Αντιδρώ από"αντιδρώ";
συνθ StyledButton = στυλ.κουμπί`
 υλικό παραγεμίσματος: 1rem 0.8rem;
 ακτίνα συνόρων: 15px;
 Χρώμα φόντου: γκρι;
 χρώμα: #FFFFFF;
 μέγεθος γραμματοσειράς: 15px;
`
λειτουργίαΚουμπί() {
ΕΠΙΣΤΡΟΦΗ (
Καλώς ήρθες!!!</StyledButton>
 )
}

Στυλ ένθεσης

Μπορείτε επίσης να τοποθετήσετε στυλ όταν εργάζεστε με εξαρτήματα με στυλ. Η ένθεση στοιχείων με στυλ μοιάζει κάπως χρησιμοποιώντας τη γλώσσα επέκτασης SASS/SCSS. Μπορείτε να τοποθετήσετε στυλ σε ένθεση εάν ένα στοιχείο περιέχει πολλές ετικέτες στοιχείων και θέλει να διαμορφώσει το στυλ κάθε ετικέτας ξεχωριστά.

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

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


Στοιχεία με στυλ</h1>




Καλώς ήρθατε στο styled-components</p>
 </div>
 )
}

Αυτός ο κώδικας δημιουργεί ένα στοιχείο που περιέχει ένα h1 στοιχείο και α Π στοιχείο.

Μπορείτε να διαμορφώσετε αυτά τα στοιχεία χρησιμοποιώντας τη δυνατότητα ένθετου στυλ των στοιχείων με στυλ:

εισαγωγή Αντιδρώ από'αντιδρώ';
εισαγωγή στιλ από'στυλ-εξαρτήματα';
συνθ StyledApp = styled.div`
 χρώμα: #333333;
 text-align: κέντρο;


 h1 {
 μέγεθος γραμματοσειράς: 32px;
 στυλ γραμματοσειράς: πλάγια;
 βάρος γραμματοσειράς: έντονη;
 διάστιχο: 1.2rem;
 μετατροπή κειμένου: κεφαλαία; 
 }


 Π {
 margin-block-start: 1rem;
 μέγεθος γραμματοσειράς: 18px;
 }
`
λειτουργίαApp() {
ΕΠΙΣΤΡΟΦΗ (

Στοιχεία με στυλ</h1>




Καλώς ήρθατε στο styled-components</p>
 </StyledApp>
 )
}

Αυτός ο κώδικας χρησιμοποιεί ένα στοιχείο με στυλ και ενσωματώνει το στυλ για το h1 και Π ετικέτες.

Δημιουργία και χρήση μεταβλητών

Η δυνατότητα δημιουργίας μεταβλητών είναι ένα αξιοσημείωτο χαρακτηριστικό της βιβλιοθήκης styled-components. Αυτή η ικανότητα παρέχει δυναμικό στυλ όπου μπορείτε να χρησιμοποιήσετε μεταβλητές JavaScript για να καθορίσετε στυλ.

Για να χρησιμοποιήσετε μεταβλητές σε styled-components, δημιουργήστε μια μεταβλητή και εκχωρήστε μια τιμή ιδιότητας CSS σε αυτήν. Στη συνέχεια, μπορείτε να χρησιμοποιήσετε αυτήν τη μεταβλητή απευθείας στο CSS σας, για παράδειγμα:

εισαγωγή στιλ από"στυλ-εξαρτήματα";
συνθ MainColor = "το κόκκινο";


συνθ Επικεφαλίδα = στυλ.h1`
 χρώμα: ${MainColor};
`;
λειτουργίαApp() {
ΕΠΙΣΤΡΟΦΗ (
 <>
Γεια σου Κόσμο!</Heading>
 </>
 );
}

Στο μπλοκ κώδικα παραπάνω, το κείμενο "Γειά σου Κόσμε!" θα εμφανιστεί με κόκκινο χρώμα.

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

Επέκταση Στυλ

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

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

Σε αυτό το παράδειγμα, το Κύριο κουμπί Το στοιχείο κληρονομεί το στυλ του στοιχείου Button και προσθέτει ένα διαφορετικό χρώμα φόντου μπλε.

εισαγωγή στιλ από"στυλ-εξαρτήματα";
εισαγωγή Αντιδρώ από"αντιδρώ";
συνθ Κουμπί = στυλ.κουμπί`
 υλικό παραγεμίσματος: 1rem 0.8rem;
 ακτίνα συνόρων: 15px;
 Χρώμα φόντου: γκρι;
 χρώμα: #FFFFFF;
 μέγεθος γραμματοσειράς: 15px;
`


συνθ PrimaryButton = στυλ (Κουμπί)`
 Χρώμα φόντου: μπλε;
`
λειτουργίαApp() {
ΕΠΙΣΤΡΟΦΗ (

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

ο όπως και Το prop σάς επιτρέπει να καθορίσετε το υποκείμενο στοιχείο HTML/JSX που θα απέδιδε το στοιχείο με στυλ.

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

εισαγωγή στιλ από"στυλ-εξαρτήματα";
εισαγωγή Αντιδρώ από"αντιδρώ";
συνθ Κουμπί = στυλ.κουμπί`
 υλικό παραγεμίσματος: 1rem 0.8rem;
 ακτίνα συνόρων: 15px;
 Χρώμα φόντου: γκρι;
 χρώμα: #FFFFFF;
 μέγεθος γραμματοσειράς: 15px;
`
λειτουργίαApp() {
ΕΠΙΣΤΡΟΦΗ (

Αυτός ο κώδικας αποδίδει το Κουμπί συστατικό ως ένα ένα στοιχείο, ρυθμίζοντας το href αποδίδω σε '#'.

Δημιουργία παγκόσμιων στυλ

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

Το Styled-Components προσφέρει α createGlobalStyle λειτουργία που σας δίνει τη δυνατότητα να δηλώνετε στυλ παγκοσμίως. ο createGlobalStyle καταργεί τον περιορισμό του στυλ με εύρος στοιχείων και σας επιτρέπει να δηλώνετε στυλ που ισχύουν για κάθε στοιχείο.

Για να δημιουργήσετε καθολικά στυλ, εισάγετε το createGlobalStyle λειτουργούν και δηλώνουν τα στυλ που χρειάζεστε.

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

εισαγωγή {createGlobalStyle} από'στυλ-εξαρτήματα';
συνθ GlobalStyles = δημιουργία Παγκόσμιου Στυλ`
 @εισαγωγή url(' https://fonts.googleapis.com/css2?family=Montserrat&display=swap');


 * {
 περιθώριο: 0;
 υλικό παραγεμίσματος: 0;
 box-sizing: border-box;
 }


 σώμα {
 χρώμα του φόντου: #343434;
 μέγεθος γραμματοσειράς: 15px;
 χρώμα: #FFFFFF;
 γραμματοσειρά-οικογένεια: "Μονσεράτ", Σανς σέριφ; 
 }
`
εξαγωγήΠροκαθορισμένο GlobalStyles;

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

Όπως έτσι:

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



 </div>
 )
}

Περισσότερα στα Styled Components

Έχετε μάθει πώς να ρυθμίζετε, να εγκαθιστάτε και να χρησιμοποιείτε στοιχεία με στυλ στην εφαρμογή React. Η βιβλιοθήκη styled-components είναι ένας αποτελεσματικός τρόπος για να διαμορφώσετε το στυλ της εφαρμογής σας React. Παρέχει πολλά χρήσιμα χαρακτηριστικά που επιτρέπουν ευελιξία στο στυλ και δυναμικό στυλ.

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