Stilizzazione dei componenti React con Emotion

Vuoi gestire lo styling dei componenti React in modo moderno ed efficiente? Con la libreria Emotion puoi integrare direttamente il CSS nei tuoi componenti React e progettare efficacemente la tua interfaccia utente. In questa guida ti spiegherò i concetti di base dello styling con Emotion, come installare e utilizzare la libreria e ti fornirò alcuni utili suggerimenti.

Conoscenze chiave

• Emotion consente di scrivere CSS in JavaScript e offre un'operatività intuitiva.
• Con Emotion puoi sfruttare diverse tecniche di styling, tra cui le Template Literals e l'uso del css-Props.
• La gestione dello stile diventa più modulare con l'uso di Emotion, migliorando la riutilizzabilità e la leggibilità.

Guida passo passo

1. Installazione di Emotion

Prima di tutto, devi installare Emotion nel tuo progetto. Apri il terminale e naviga nella directory del tuo progetto. Esegui il seguente comando per installare la libreria Emotion:

npm install @emotion/react @emotion/styled

2. Importazione del CSS

Nel file App.jsx della tua app puoi utilizzare Emotion. Dovresti importare Emotion per utilizzare la funzione css e importare l'elemento styled. Aggiungi il seguente all'inizio del tuo file:

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

3. Styling con le Template Literals

Utilizza la funzione css di Emotion per creare una variabile CSS. Definisci le convenzioni CSS utilizzando le Template Literals. Ecco un esempio di come puoi scrivere una classe Wrapper per la tua app:

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

Questo codice utilizza la flexbox per assicurare un layout di disposizione.

4. Applicazione dello stile

Per applicare lo stile definito, passa la variabile appStyle nella prop className del tuo elemento HTML principale. Ecco come dovrebbe apparire:

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

5. Uso di Styled-Components

Oltre all'uso della variabile css, puoi anche utilizzare Styled-Components con Emotion. Per creare un componente stilizzato, puoi utilizzare il seguente codice:

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

In questo modo, Container diventa un nuovo componente basato su CSS con tutti gli stili definiti.

6. Inserimento di media queries

Emotion semplifica l'integrazione delle media queries nel tuo CSS. Basta inserirle nelle Template Literals:

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

Questa media query modifica la dimensione del testo quando la larghezza di visualizzazione è inferiore a 600 pixel.

7. Utilizzo degli effetti Hover

Puoi definire facilmente gli effetti Hover nei tuoi template CSS:

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

Questa regola CSS cambia il colore di sfondo dell'elemento durante il passaggio del mouse su di esso.

8. Combinazione di stili più complessi

Emotion consente di combinare più nomi di classe. Questo è reso possibile dalla funzione cx:

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

const primaryStyle = css color: blue;;

const secondaryStyle = css color: red;;

In questo caso il testo verrà visualizzato sia in blu che in rosso.

9. Future estensioni

Se stai gestendo un grande progetto in futuro, potrebbe essere utile organizzare i tuoi stili in diversi moduli. Ad esempio, puoi creare commonStyles.js ed esportare i tuoi stili di base lì:

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

Ora puoi inserire flexCenter in qualsiasi altra componente.

10. Test e aggiustamenti

Carica la tua applicazione nel browser e controlla se gli stili vengono visualizzati correttamente. Sperimenta con stili diversi e guarda il risultato in tempo reale.

Riepilogo

Con una combinazione di Emotion e React, è possibile creare layout UI realisticamente ora. Emotion consente di definire e gestire CSS direttamente in JavaScript in modo efficace. Ciò consente di beneficiare della densità dello schermo e di una stretta integrazione tra logica e stile.