Όλοι γνωρίζουμε τον τυπικό τρόπο συνδέοντας ένα φύλλο στυλ στο <head> ενός εγγράφου HTML, σωστά; Αυτός είναι μόνο ένας από τους πολλούς τρόπους με τους οποίους μπορούμε να γράψουμε CSS. Αλλά πώς είναι να γράφεις στυλ σε μια εφαρμογή μιας σελίδας (SPA), ας πούμε σε ένα έργο React;
Αποδεικνύεται ότι υπάρχουν διάφοροι τρόποι για να κάνετε το στυλ μιας εφαρμογής React. Κάποια επικαλύπτονται με το παραδοσιακό στυλ, άλλα όχι τόσο. Αλλά ας μετρήσουμε όλους τους τρόπους που μπορούμε να το κάνουμε.
Εισαγωγή εξωτερικών φύλλων στυλ
Όπως υποδηλώνει το όνομα, το React μπορεί να εισάγει αρχεία CSS. Η διαδικασία είναι παρόμοια με το πώς συνδέουμε το αρχείο CSS στο HTML <head>:
- Δημιουργήστε ένα νέο αρχείο CSS στον κατάλογο του έργου σας.
- Γράψτε CSS.
- Εισαγάγετε το στο αρχείο React.
Παρόμοιες θέματα:
import "./style.css";Αυτό συνήθως πηγαίνει στην κορυφή του αρχείου όπου γίνονται άλλες εισαγωγές:
import { React } from "react";
import "./Components/css/App.css";
function App() {
return (
<div className="main">
</div>
);
}
export default App;Σε αυτό το παράδειγμα, ένα αρχείο CSS εισάγεται σε ένα App.js από το /Components/css φάκελο.
Γράψτε ενσωματωμένα στυλ
Μπορεί να έχετε συνηθίσει να ακούτε ότι το inline styling δεν είναι και τόσο καλό για συντηρησιμότητα και οτιδήποτε άλλο, αλλά σίγουρα υπάρχουν καταστάσεις (ορίστε ένα!) όπου έχει νόημα. Και η δυνατότητα συντήρησης είναι λιγότερο πρόβλημα στο React, καθώς το CSS συχνά βρίσκεται ήδη μέσα στο ίδιο αρχείο ούτως ή άλλως.
Αυτό είναι ένα εξαιρετικά απλό παράδειγμα ενσωματωμένου στυλ στο React:
<div className="main" style={{color:"red"}}>Μια καλύτερη προσέγγιση, ωστόσο, είναι η χρήση αντικειμένων:
- Αρχικά, δημιουργήστε ένα αντικείμενο που περιέχει στυλ για διαφορετικά στοιχεία.
- Στη συνέχεια, προσθέστε το σε ένα στοιχείο χρησιμοποιώντας το
styleχαρακτηριστικό και, στη συνέχεια, επιλέξτε την ιδιότητα για στυλ.
Ας το δούμε στο πλαίσιο:
import { React } from "react";
function App() {
const styles = {
main: {
backgroundColor: "#f1f1f1",
width: "100%",
},
inputText: {
padding: "10px",
color: "red",
},
};
return (
<div className="main" style={styles.main}>
<input type="text" style={styles.inputText}></input>
</div>
);
}
export default App;Αυτό το παράδειγμα περιέχει α styles αντικείμενο που περιέχει δύο ακόμη αντικείμενα, ένα για το .main class και το άλλο για εισαγωγή κειμένου, που περιέχουν κανόνες στυλ παρόμοιους με αυτούς που θα περιμέναμε να δούμε σε ένα εξωτερικό φύλλο στυλ. Αυτά τα αντικείμενα στη συνέχεια εφαρμόζονται στο style χαρακτηριστικό των στοιχείων που βρίσκονται στην επιστρεφόμενη σήμανση.
Λάβετε υπόψη ότι οι σγουρές αγκύλες χρησιμοποιούνται κατά την αναφορά σε στυλ αντί για εισαγωγικά που συνήθως χρησιμοποιούσαμε σε απλό HTML.
Χρησιμοποιήστε μονάδες CSS
Ενότητες CSS… τι στο καλό συνέβη με αυτούς, σωστά; Έχουν το πλεονέκτημα των μεταβλητών τοπικού εύρους και μπορούν να χρησιμοποιηθούν δίπλα στο React. Τι είναι όμως, πάλι, ακριβώς;
Παραθέτοντας το τεκμηρίωση του repo:
Τα CSS Modules λειτουργούν με τη μεταγλώττιση μεμονωμένων αρχείων CSS τόσο σε CSS όσο και σε δεδομένα. Η έξοδος CSS είναι κανονική, καθολική CSS, η οποία μπορεί να εγχυθεί απευθείας στο πρόγραμμα περιήγησης ή να συνδεθεί μεταξύ τους και να εγγραφεί σε ένα αρχείο για χρήση στην παραγωγή. Τα δεδομένα χρησιμοποιούνται για την αντιστοίχιση των αναγνώσιμων από τον άνθρωπο ονομάτων που έχετε χρησιμοποιήσει στα αρχεία στην παγκόσμια ασφαλή έξοδο CSS.
Με απλούστερους όρους, τα CSS Modules μας επιτρέπουν να χρησιμοποιούμε το ίδιο όνομα κλάσης σε πολλά αρχεία χωρίς συγκρούσεις, καθώς σε κάθε όνομα κλάσης δίνεται ένα μοναδικό όνομα προγραμματισμού. Αυτό είναι ιδιαίτερα χρήσιμο σε μεγαλύτερες εφαρμογές. Κάθε όνομα κλάσης καλύπτεται τοπικά στο συγκεκριμένο στοιχείο στο οποίο εισάγεται.
Ένα φύλλο στυλ μονάδας CSS είναι παρόμοιο με ένα κανονικό φύλλο στυλ, μόνο με διαφορετική επέκταση (π.χ styles.module.css). Δείτε πώς έχουν ρυθμιστεί:
- Δημιουργία αρχείου με
.module.cssως επέκταση. - Εισαγάγετε αυτήν την ενότητα στην εφαρμογή React (όπως είδαμε νωρίτερα)
- Προσθέστε μια
classNameσε ένα στοιχείο ή στοιχείο και αναφέρετε το συγκεκριμένο στυλ από τα εισαγόμενα στυλ.
Πολύ απλό παράδειγμα:
/* styles.module.css */
.font {
color: #f00;
font-size: 20px;
}
import { React } from "react";
import styles from "./styles.module.css";
function App() {
return (
<h1 className={styles.heading}>Hello World</h1>
);
}
export default App;Χρησιμοποιήστε εξαρτήματα με στυλ
Έχετε χρησιμοποιήσει στιλ-εξαρτήματα? Είναι αρκετά δημοφιλές και σας επιτρέπει να δημιουργήσετε προσαρμοσμένα στοιχεία χρησιμοποιώντας πραγματικό CSS στο JavaScript σας. Ένα στοιχείο με στυλ είναι βασικά ένα στοιχείο React με στυλ — ετοιμαστείτε για αυτό. Ορισμένες από τις δυνατότητες περιλαμβάνουν μοναδικά ονόματα κλάσεων, δυναμικό στυλ και καλύτερη διαχείριση του CSS, καθώς κάθε στοιχείο έχει τα δικά του ξεχωριστά στυλ.
Εγκαταστήστε το πακέτο styled-components npm στη γραμμή εντολών:
npm install styled-componentsΣτη συνέχεια, εισαγάγετε το στην εφαρμογή React:
import styled from 'styled-components'Δημιουργήστε ένα στοιχείο και εκχωρήστε μια ιδιότητα στυλ σε αυτό. Σημειώστε τη χρήση των κυριολεκτικών προτύπων που υποδηλώνονται με backtick στο Wrapper αντικείμενο:
import { React } from "react";
import styled from "styled-components";
function App() {
const Wrapper = styled.div`
width: 100%;
height: 100px;
background-color: red;
display: block;
`;
return <Wrapper />;
}
export default App;Τα παραπάνω Wrapper Το στοιχείο θα αποδοθεί ως div που περιέχει αυτά τα στυλ.
Στυλ υπό όρους
Ένα από τα πλεονεκτήματα των styled-components είναι ότι τα ίδια τα στοιχεία είναι λειτουργικά, καθώς μπορείτε να χρησιμοποιήσετε στηρίγματα μέσα στο CSS. Αυτό ανοίγει την πόρτα σε δηλώσεις υπό όρους και αλλαγή στυλ με βάση μια κατάσταση ή ένα υπόβαθρο.
Ακολουθεί μια επίδειξη που το δείχνει:
Εδώ, χειραγωγούμε το div's display ιδιοκτησία στην κατάσταση εμφάνισης. Αυτή η κατάσταση ελέγχεται από ένα κουμπί που αλλάζει την κατάσταση του div όταν γίνεται κλικ. Αυτό, με τη σειρά του, εναλλάσσεται μεταξύ των στυλ δύο διαφορετικών καταστάσεων.
Σε εν σειρά if δηλώσεις, χρησιμοποιούμε α ? αντί για τα συνηθισμένα if/else σύνταξη. ο else μέρος είναι μετά το ερωτηματικό. Και να θυμάστε να καλείτε ή να χρησιμοποιείτε πάντα την κατάσταση αφού έχει αρχικοποιηθεί. Σε αυτό το τελευταίο demo, για παράδειγμα, η κατάσταση θα πρέπει να είναι πάνω από το Wrapper στυλ των συστατικών.
Στιλ Happy React!
Αυτό είναι ένα περιτύλιγμα, παιδιά! Εξετάσαμε μια χούφτα διαφορετικούς τρόπους για να γράψουμε στυλ σε μια εφαρμογή React. Και δεν είναι ότι το ένα είναι καλύτερο από τα υπόλοιπα. η προσέγγιση που θα χρησιμοποιήσετε εξαρτάται φυσικά από την κατάσταση. Ας ελπίσουμε ότι τώρα τα έχετε κατανοήσει καλά και γνωρίζετε ότι έχετε ένα σωρό εργαλεία στο οπλοστάσιο στυλ React σας.
