La libreria Emotion semplifica l'uso dei CSS in React e aggiunge anche alcune utili funzionalità di sintassi.
Disegnare un'applicazione React può essere difficile, specialmente se vuoi mantenere i tuoi stili organizzati e gestibili. Per aiutare a semplificare questo processo, la libreria Emotion fornisce un'astrazione di livello superiore oltre ai CSS.
Cos'è l'emozione?
Emotion è una libreria per lo styling delle applicazioni React che fornisce un modo semplice ed efficiente per gestire i tuoi stili. Ti consente di scrivere CSS in JavaScript e fornisce un'API flessibile per lo styling dei tuoi componenti.
Uno dei principali vantaggi dell'utilizzo di Emotion per modellare la tua applicazione React è che fornisce un modo più efficiente per gestire i tuoi stili. Ad esempio, è possibile utilizzare nomi di classe identici in più componenti senza il rischio di collisioni di denominazione che si verificano quando si lavora con CSS/SASS.
La libreria Emotion applica i tuoi stili solo ai componenti che li utilizzano anziché all'intera pagina. Questo può aiutarti a evitare conflitti con altri stili sulla pagina e rendere il tuo codice più modulare e riutilizzabile.
Come installare Emotion
Per aggiungere la libreria Emotion alla tua applicazione React, esegui il seguente comando da terminale:
npm install --save @emotion/react
La libreria Emotion dovrebbe ora essere installata nel tuo progetto e pronta per l'uso per modellare la tua applicazione React.
Styling utilizzando la prop css di Emotion
Dopo aver installato la libreria Emotion, sarai in grado di utilizzare il css prop per modellare la tua applicazione React. IL css prop è simile allo style prop in quanto puoi passargli stili sotto forma di stringhe o normali oggetti JavaScript.
Per dare uno stile alla tua applicazione usando il css prop, devi importarlo dal file @emozione/reagire libreria, quindi definisci i tuoi stili:
/** @jsxImportSource @emozione/reagisci */
importare Reagire da'reagire';
importare {css} da'@emozione/reagire';funzioneApp() {
ritorno (
imbottitura: 0.5rem 1rem;
bordo: nessuno;
famiglia di caratteri: corsivo;
raggio del bordo: 12px;
colore: #333333;
colore di sfondo: eredita;
margine-blocco-inizio: 2rem;
margine-fine-blocco: 2rem;
`}>
Cliccami
</button>
)
}
esportarepredefinito Applicazione;
La prima riga di codice, /** @jsxImportSource @emozione/reagire */, è un commento particolare da aggiungere al file JSX per indicare che la libreria Emotion deve essere utilizzata come pragma JSX per quel file.
In JSX, un pragma è una funzione che trasforma la sintassi JSX in JavaScript regolare. Per impostazione predefinita, React utilizza il React.createElement funzione come pragma JSX. Tuttavia, con il @jsxImportSource comment, è possibile specificare un pragma diverso.
In questo caso, il @emozione/reagire pragma dice a JSX di usare il file jsx funzione dalla libreria Emotion per trasformare il codice JSX. Aggiungendo il commento pragma a un file JSX, puoi utilizzare le funzionalità CSS-in-JS della libreria Emotion nei tuoi componenti.
Il componente pulsante esegue il rendering di un pulsante con uno stile personalizzato. Ecco, il css prop aggiunge lo stile personalizzato all'elemento pulsante.
IL css prop supporta anche lo stile nidificato. Lo stile nidificato consente di scrivere stili nidificati l'uno nell'altro.
Per esempio:
/** @jsxImportSource @emozione/reagisci */
importare Reagire da'reagire';
importare {css} da'@emozione/reagire';funzioneApp() {
ritorno (
imbottitura: 0.5rem 1rem;
bordo: nessuno;
famiglia di caratteri: corsivo;
raggio del bordo: 12px;
colore: #333333;
colore di sfondo: eredita;
margine-blocco-inizio: 2rem;
margine-fine-blocco: 2rem;&:passa il mouse{
colore: #e2e2e2;
colore di sfondo: #333333;
}
`}>
Cliccami
</button>
)
}
esportarepredefinito Applicazione;
In questo esempio, la dichiarazione dello stile al passaggio del mouse utilizza la funzionalità di stile nidificata di css puntello. Lo sfondo e il colore del carattere nel blocco di codice in alto cambieranno ogni volta che passi il mouse sopra il pulsante.
Passaggio di stili oggetto alla prop css
IL css prop accetta anche normali stili oggetto JavaScript. Quando si applica lo stile a più componenti, l'utilizzo degli stili oggetto consente di riutilizzare gli stili nei componenti.
Per passare gli stili oggetto al file css prop, definisci gli stili come oggetto JavaScript e passalo al prop:
cost stile = {
imbottitura: '0.5rem 1rem',
confine: 'nessuno',
famiglia di font: 'corsivo',
bordoRaggio: '12px',
colore: '#333333',
colore di sfondo: 'ereditare',
margineBloccoInizio: '2rim',
marginBlockEnd: '2rim','&:passa il mouse': {
colore: '#e2e2e2',
colore di sfondo: '#333333',
}
}
ritorno ("app">
Si noti che i nomi delle proprietà CSS sono camelCased anziché sillabati. Questo perché gli stili sono definiti come oggetti JavaScript, che utilizzano le convenzioni di denominazione camelCase.
Stile utilizzando i componenti con stile
La libreria Emotion utilizza anche componenti con stili durante lo styling delle applicazioni React. Utilizzo di componenti con stile è simile ai componenti React, a parte il fatto che contengono stili pronti all'uso. Per creare componenti con stili, utilizzerai il file stile funzione.
IL stile La funzione consente di creare componenti con stili riutilizzabili. Per usare il stile funzione, importarlo dal file emozione/stile biblioteca.
Prendere il @emozione/stile library nella tua applicazione, la installerai nel tuo progetto. Puoi farlo eseguendo il seguente comando nel terminale del tuo progetto:
npm install @emotion/styled
Dopo aver installato il @emozione/stile libreria, importare il file stile funzione e definisci i tuoi stili:
importare stile da"@emozione/stile";cost Button = styled.button({
imbottitura: '0.5rem 1rem',
confine: 'nessuno',
famiglia di font: 'corsivo',
bordoRaggio: '12px',
colore: '#333333',
colore di sfondo: 'ereditare',
margineBloccoInizio: '2rim',
marginBlockEnd: '2rim','&:passa il mouse': {
colore: '#e2e2e2',
colore di sfondo: '#333333',
}
})
esportarepredefinito Pulsante;
Nel blocco di codice sopra, un componente con stile Pulsante è creato. Puoi utilizzare questo pulsante nella tua applicazione React come qualsiasi altro componente React.
Così:
importare Reagire da'reagire';
importare Pulsante da'./Pulsante';funzioneApp() {
ritorno (
esportarepredefinito Applicazione;
Rendere il App componente visualizzerà un pulsante con gli stili definiti nel file Pulsante componente sullo schermo.
IL stile la funzione accetta anche stili di stringa. Sembra diverso dall'approccio degli stili oggetto ma funziona in modo simile.
importare stile da"@emozione/stile";cost Button = styled.button`
imbottitura: 0.5rem 1rem;
bordo: nessuno;
famiglia di caratteri: corsivo;
raggio del bordo: 12px;
colore: #333333;
colore di sfondo: eredita;
margine-blocco-inizio: 2rem;
margine-fine-blocco: 2rem;&:passa il mouse {
colore: #e2e2e2;
colore di sfondo: #333333;
}
`
esportarepredefinito Pulsante;
Styling efficiente con emozione
Emotion è una potente libreria per lo styling dei componenti React che fornisce un modo semplice ed efficiente per gestire i tuoi stili. Che tu sia un principiante o uno sviluppatore esperto, Emotion può aiutarti a semplificare il processo di definizione dello stile della tua applicazione React e semplificare la manutenzione e la scalabilità del tuo codice.
Quindi, se stai cercando un modo più efficiente e flessibile per modellare i tuoi componenti React, considera Emotion.
